想问下各位，highcharts控件图表显示的大小怎么控制，我想在jsp中一排显示两个，想让两个图表小一些

Highcharts 数据可视化图表控件是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表。charts是图表的意思

首先请简单的看一下关于 时区 及 UTC 的定义，我们可以简单的得出以下两个认知： 1、UTC 是世界标准时间，用于协调各国时间 2、中国的时区是 UTC +8，即比标准时区的时间快 8 小时 接着来看问题，很多用户在使用 Highcharts 时，经常会遇到时间显示于预期的不一致，具体表现是： 用new Date("2017/01/01").getTime()获取的时间最终在 Highcharts 中显示的却是2016-12-31 16:00，也就是时间相差 8 小时。经过上面的科普，你应该很快就知道问题所在，也就是时区惹的祸。 1、设置时区偏移 2、设置不使用 UTC 标准时间 在线试一试 3、使用Date.UTC获取时间戳 需要注意Date.UTC(year, month, day, ...)中的 month 是从 0 开始的，也就是 0 表示一月，11 表示十二月。 Highcharts 默认的时间是标准时间（即 UTC 时间），new Date创建的时间是包含当前时区的，所以直接用会导致偏差，解决办法是 1 和 2，分别表示做时区调整和使用当前时区。方法 3 中Date.UTC则是创建标准时间。

在Axure中也有统计图表，主要功能是各种数据处理，统计和分析。主要有2种方法设计统计图表 【1】利用excel设计统计图表 1.利用execl做一个表格，并将做成图表2.将图表截图保存，并打开axure 3.通过图片元件将学生成绩统计图导入到Axure 【2】利用HighCharts设计统计图表 1.打开axure，并利用内联框架加载2.添加链接--选中双击弹出链接属性3.HighCharts文件夹要跟生成的文件夹放在一起。4. HighCharts文件夹 【说明】 1.利用excel设计统计图表，这个是静态的是不能修改的。如果想要动态的图表就需要利用HighCharts 2.利用HighCharts设计统计图表时，需要注意一点，这个需要按F8(生成网页)才有效果，这个是预览不了的

$(function () { var chart = $("#container").highcharts({ chart: { marginBottom: 80 }, xAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, yAxis: { labels: { align: "left", x: 0, y: -2 } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }).highcharts(); setTimeout(function(){ chart.series[0].setData([]); // 更新 series },1000);});

一、针对某个数据点设置其样式代码如下：效果图如下：二、针对全部数据点设置样式代码如下：效果图如下：三、设置某个数据点标签的属性代码如下：效果图如下：

plotOptions: { series: { pointPadding: 0, //数据点之间的距离值 groupPadding: 0, //分组之间的距离值 borderWidth: 0, shadow: false, pointWidth:5 //柱子之间的距离值 } }

首先，需要说明hightcharts 4支持原生3d图，如果，你要做好效果的3d，建议下载最新的4版本。这是基础。其次，3d饼图，需要在plotOptions中设置深度属性：就是这样一句，设置为25：plotOptions.pie.depth: 25准备工作完了，我们开始制作3D饼图。步骤一：按照老规矩，写入highcharts必要的JS：步骤二：我们为图表设定一个大小，高度为400px，用div将它包围，然后设置一个id为container，方便下面的js：步骤三填入js代码：$(function () { $("#container").highcharts({ chart: { type: "pie", options3d: {enabled: true, alpha: 45, beta: 0, } }, plotOptions: { pie: { depth: 25 } }, series: [{ data: [2, 4, 6, 1, 3] }] });});

最近一直在研究SVG 恰好想起同事之前问过的一个问题 需求是给一个区域图部分高亮显示 高亮的区域由鼠标划过的坐标而定 其实也就是如何在一整块的SVG图形上显示不同的颜色 最后同事是用重新画图的方式解决的 在我看来 问题可能更为简单 Highcharts的区域图的<path>的d属性的值是有规律可循的 反映出这些点在屏幕上的坐标 所以我们只要找到我们想要区域的点 连接起来形成一个闭合图形 再给这一部分涂上颜色就可以了 最后显示出的效果如下图 具体实现过程可以在 此处 查看源码

1) npm安装highcharts2)定义变量 var Highcharts = require("highcharts");3)获取元素 Highcharts.chart(this.$el, {...}) in "mounted" method because this.$el isn"t available before "mounted"4) 在调用beforeDestroy前销毁highcharts对象举例如下：<template> <div><div></template><script>var Highcharts = require("highcharts");export default { name : "Chart", props : { series : { type: Array, required: true } }, data : function() { return { target: undefined } }, mounted : function() { this.target = Highcharts.chart(this.$el, { title: { text: "Monthly Average Temperature", x: -20 //center }, subtitle: { text: "Source: WorldClimate.com", x: -20 }, xAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, yAxis: { title: { text: "Temperature (°C)" }, plotLines: [{ value: 0, width: 1, color: "#808080" }] }, tooltip: { valueSuffix: "°C" }, legend: { layout: "vertical", align: "right", verticalAlign: "middle", borderWidth: 0 }, series: this.series }); }, beforeDestroy: function() { this.target.destroy(); },}</script>

highcharts 坐标轴：Axis Labels 坐标轴标签（分类）。Labels常用属性有enabled、formatter、setp、staggerLinesenabled 是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可。Formatter 标签格式化函数。Step Labels显示间隔，数据类型为number（或int）。staggerLines 水平轴Lables显示行数。（该属性只对水平轴有效）当Lables内容过多时，可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。Axis TickTick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px，宽为1px；y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。详情可以自己查阅：http://www.hcharts.cn/docs/index.php?doc=basic-axis

　　页面内加载多个图表的时候，页面内需要放置多个div容器，且在创建的时候renderTo的div容器id需要匹配。　　如果在创建多个图表的时候，发现只创建了一个或者部分图表，说明出现了错误，错误的原因分析如下所示：　　1、jQuery.js的版本是否和highchart.js版本一直；　　2、highchart.js是不是不支持初始化图表内的某些属性值，简言之就是highchart.js的版本不对。　　3、放置图表的div容器不存在或者id写错。

使用highcharts去掉图表上那个官网标识链接的方法如下：1、找到highcharts.js这个文件2、在源码中查找字符串“highcharts”3、然后替换成空字符串或者你想要显示的字符串4、对应的这是一个a标签，你可以修改成你想要连接的网址，如果不想链接到其他地方就改成“#”。还有一种方法就是在图表定义的时候和title平级的地方加上下面这段代码就行credits: { enabled: false}这两种方法 都是可行的 据个人喜好 选择

针对这类问题，其实在highcharts的相应API内有一个属性dataLabels可以加以控制的。代码如下所示：view sourceprint?1.plotOptions:{2. column:{3. dataLabels:{4. enabled:true //是否显示数据标签5. }6. }7.},转载 作者：highcharts

是开在心间的一束馨香，花中注定。白落梅写的因为懂

步骤一：老规矩，插入highcharts.js和jquery.min.js步骤二：先做柱状图先设置一个container的ID,高和宽自己定，这里，我定稿为400px然后是图表的js：说明一：在输入月份等类型时候，也可以写成英文，写成中文，记着就爱utf-8，不然会乱码哦。说明二：设置 allowPointSelect: true，启用选择。步骤三：设置按钮先设置id=button获得选择点然后设置函数： // the button action $("#button").click(function() { var selectedPoints = $("#container").highcharts().getSelectedPoints(); alert ("你选择了 "+ selectedPoints.length +" points"); });});好了一个基本的highcharts 柱状图以及选择功能就做好了，比较简单。

$(function () { $(document).ready(function () { Highcharts.setOptions({ global: { useUTC: false } }); var chart; $("#container").highcharts({ chart: { type: "spline", animation: Highcharts.svg, // don"t animate in old IE marginRight: 10, events: { load: function () { // set up the updating of the chart each second var series = this.series[0]; var series1 = this.series[1]; setInterval(function () { var x = (new Date()).getTime(), // current time y = Math.random(); y2 = Math.random(); series.addPoint([x, y], true, true); series1.addPoint([x, y2], true, true); }, 1000); } } }, title: { text: "demo（样例）" }, xAxis: { type: "datetime", tickPixelInterval: 150 }, yAxis: { title: { text: "Value" }, plotLines: [{ value: 0, width: 1, color: "#808080" }] }, tooltip: { formatter: function () { return "<b>" + this.series.name + "</b><br/>" + Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) + "<br/>" + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: "Random data", data: (function () { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; })() }, { name: "Random data1", data: (function () { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; })() }] }); }); });

应该是可以的

使用highcharts去掉图表上那个官网标识链接的方法如下：1、找到highcharts.js这个文件2、在源码中查找字符串“highcharts”3、然后替换成空字符串或者你想要显示的字符串4、对应的这是一个a标签，你可以修改成你想要连接的网址，如果不想链接到其他地方就改成“#”。还有一种方法就是在图表定义的时候和title平级的地方加上下面这段代码就行credits: { enabled: false}这两种方法 都是可行的 据个人喜好 选择

我了解的可以在3个地方设置颜色:plotOptions-->series-->colorcolorsseries-->color优先级方面: 3>1>2即如果为某数据集指定了颜色,会覆盖其他颜色配置;如果给plotOpt做了颜色设置,会覆盖根配置下colors参数;colors实际上是在初始化highchart的时候覆盖 Highcharts.options中的colors,这个一般用于全局调色.

请问你说的是柱子本身的宽度呢？ 还是柱状图整幅图的宽度？Origin作图的最基本原则是 “想要修改什么，就直接双击什么（或者在相应位置点击右键）”如果是柱子本身的宽度，那么直接用鼠标双击任意一根柱子，在弹出的对话框中，选择右侧的 Spacing选项卡，在 Gap Between Bars (in%) 选项中，将数值增大。这个数值是柱子之间宽度的大小，用百分比作为单位。增大数值，柱子宽度变窄（也就是柱子之间的间距增大了）。如果是调整整幅柱状图的宽度，那么在坐标轴外的空白处点击鼠标右键【注意，一定要是坐标轴范围外的空白处，Origin在不同位置点击鼠标右键，弹出的菜单内容是不同的，一定要注意】，在弹出的菜单中选择 Properties，在新弹出的对话框中，选择 Print/Dimsensions选项卡，在Dimensions选项中，减小 Width选择中的数值。这个数值就是整幅图的宽度值。

方法如下：在highCharts对象中加入如下代码：xAxis : { opposite : true}在Axis（包括xAxis和yAxis）有一个属性tickInterval，number类型，表示间隔，也就是间隔多少个值显示，比如设置为5，则表示每隔5个值才显示一个，在上面的基础上，经过设置tickInterval值为5，效果如下：<!doctype html><html lang="en"><head> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> <script type="text/javascript"> var options = { chart: { renderTo: "container", type:"spline" }, xAxis: { tickInterval: 5, categories:["2013-08-01 00:00:00","2013-08-01 00:00:10","2013-08-01 00:00:20","2013-08-01 00:00:30","2013-08-01 00:00:40","2013-08-01 00:00:50","2013-08-01 00:01:00","2013-08-01 00:01:10","2013-08-01 00:01:20","2013-08-01 00:01:30","2013-08-01 00:01:40","2013-08-01 00:01:50","2013-08-01 00:02:00","2013-08-01 00:02:10","2013-08-01 00:02:20","2013-08-01 00:02:30","2013-08-01 00:02:40","2013-08-01 00:02:50","2013-08-01 00:03:00","2013-08-01 00:03:10","2013-08-01 00:03:20","2013-08-01 00:03:30","2013-08-01 00:03:40","2013-08-01 00:03:50","2013-08-01 00:04:00"], labels:{ x:45,//调节x偏移 //y:-35,//调节y偏移 //rotation:25//调节倾斜角度偏移 } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }], legend :{ align: "right", verticalAlign: "top", x: -10, y: 50, floating: true } }; $(document).ready(function(){ var chart = new Highcharts.Chart(options); }); </script></head> <body> <div id="container"></div></body></html>

g

设置对应series的为false，即[mw_shl_code=javascript,true]series: [{ visible: false//默认不显示}, {}][/mw_shl_code]

你好。 我研究了下，这个默认隐藏是可以实现的，具体实现方法是： var seriesPv = chart.series[0]; if (seriesPv.visible) { seriesPv.hide(); } else { seriesPv.show(); } var seriesBounceRate = chart.series[3]; if (seriesBounceRate.visible) { seriesBounceRate.hide(); } else { seriesBounceRate.show(); } 如果我的回答没能帮助您，请继续追问。

您好，请问你怎么实现不联网导出图片这个功能的呀？？

highcharts内部定义了一些颜色，如果用户没有显示的去设置颜色的，就会去内置的颜色，设置的办法很简单，你只需要加上一个这样的属性就行：12colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00", "#24CBE5", "#64E572", "#FF9655", "#FFF263", "#6AF9C4"]这里面就定义你自己想要的颜色就ok，有问题你都可以追问，没问题望采纳，谢谢，再送你一个api吧

xAxis.labels.y可以设置$(function () { $("#container").highcharts({ chart: { marginBottom: 80 }, xAxis: { labels: { align: "left", x: 1, y: 50 }, categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, yAxis: { labels: { align: "left", x: 1, y: -20 }, }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] });});

在Axis（包括xAxis和yAxis）有一个属性tickInterval，number类型，表示间隔，也就是间隔多少个值显示，比如设置为5，则表示每隔5个值才显示一个，在上面的基础上，经过设置tickInterval值为5，效果如下:123456789xAxis: {tickInterval: 5,categories:["2013-08-01 00:00:00","2013-08-01 00:00:10","2013-08-01 00:00:20","2013-08-01 00:00:30","2013-08-01 00:00:40","2013-08-01 00:00:50","2013-08-01 00:01:00","2013-08-01 00:01:10","2013-08-01 00:01:20","2013-08-01 00:01:30","2013-08-01 00:01:40","2013-08-01 00:01:50","2013-08-01 00:02:00","2013-08-01 00:02:10","2013-08-01 00:02:20","2013-08-01 00:02:30","2013-08-01 00:02:40","2013-08-01 00:02:50","2013-08-01 00:03:00","2013-08-01 00:03:10","2013-08-01 00:03:20","2013-08-01 00:03:30","2013-08-01 00:03:40","2013-08-01 00:03:50","2013-08-01 00:04:00"],labels:{x:45,//调节x偏移//y:-35,//调节y偏移//rotation:25//调节倾斜角度偏移}},

这里将针对highcharts图表组件内的图例legend展开讲述，图例的显示位置调整，亮瞎你的双眼！ 一、将图例Legend放于图表右侧 1、设置chart的marginRight属性值 chart: { marginRight: 120 }, 2、设置legend图例属性值如下 legend: { align: "righ...

可以通过设置plotOptions内对应series的pointWidth也就是数据点的宽度值加以控制，完整代码如下所示：view sourceprint?01.$(function () {02.$("#container").highcharts({03.chart: {04.type: "bar"05.},06.xAxis: {07.categories: ["Jan", "Feb", "Mar"]08.},09. 10.plotOptions: {11.series: {12.pointWidth: 3 //柱子的宽度值 单位为px13.}14.},15.credits: {16.text: "highcharts的博客",17.href: "http://www.stepday.com/myblog/?highcharts",18.position: {19.align: "right", //水平居右20.verticalAlign: "bottom" //垂直底部21.},22.style: {23.cursor: "pointer", //鼠标样式为手型24.color: "#FF0000", //字体颜色25.fontSize: "10px" //字体大小26.}27.},28.series: [{29.data: [29.9, 71.5, 106.4]30.}]31.});32.});

highcharts如何实现动态刷新实现的是折线图。目前已经实现了从数据库中加载数据，但是定时刷新数据不知道怎么实现。使用chart.series[0].setData(data);每次刷新后表数据就没有了，不知道是不是data的格式写错了，想问下参数data的数据格式的例子。 function getForm(){ //使用JQuery从后台获取JSON格式的数据 $.ajax({ type: "POST", url: "chart.ashx", success: function(data){ chart.series[0].setData(data); }, error:function(msg) { alert("通信错误!"); } }); $(document).ready(function() { //每隔1秒自动调用方法，实现图表的实时更新 window.setInterval(getForm,10000); });

你问的比较笼统，简要回答：highcharts 坐标轴：Axis Labels 坐标轴标签（分类）。Labels常用属性有enabled、formatter、setp、staggerLinesenabled 是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可。Formatter 标签格式化函数。Step Labels显示间隔，数据类型为number（或int）。staggerLines 水平轴Lables显示行数。（该属性只对水平轴有效）当Lables内容过多时，可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。Axis TickTick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px，宽为1px；y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。详情可以自己查阅：http://www.hcharts.cn/docs/index.php?doc=basic-axis

您好，很高兴为您解答。针对网格线的设置主要就是几个属性：1、gridLineColor ：网格线颜色值，默认为#C0C0C0；2、gridLineDashStyle ：网格线样式，默认为solid实线；其范围值有：1234567891011121314view sourceprint?var dashStyles = ["Solid","ShortDash","ShortDot","ShortDashDot","ShortDashDotDot","Dot","Dash","LongDash","DashDot","LongDashDot","LongDashDotDot"];3、gridLineWidth：网格线宽度，默认为0；需要注意的是，我们想设置横向的网格线，需要设置yAxis，设置纵向网格线的时候需要设置xAxis节点，完整代码示例如下所示：1234567891011121314151617181920view sourceprint?$(function () {$("#container").highcharts({chart: {},xAxis: {categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],gridLineColor: "#197F07",//纵向网格线颜色gridLineWidth: 1 //纵向网格线宽度},yAxis: {gridLineColor: "#197F07",//横向网格线颜色gridLineDashStyle: "longdash",//横向网格线样式gridLineWidth: 1//横向网格线宽度},series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }]});});如若满意，请点击右侧【采纳答案】，如若还有问题，请点击【追问】希望我的回答对您有所帮助，望采纳！

方法一：在Axis（包括xAxis和yAxis）有一个属性tickInterval，number类型，表示间隔，也就是间隔多少个值显示，比如设置为5，则表示每隔5个值才显示一个，在上面的基础上，经过设置tickInterval值为5，效果如下:xAxis: {tickInterval: 5,categories:["2013-08-01 00:00:00","2013-08-01 00:00:10","2013-08-01 00:00:20","2013-08-01 00:00:30","2013-08-01 00:00:40","2013-08-01 00:00:50","2013-08-01 00:01:00","2013-08-01 00:01:10","2013-08-01 00:01:20","2013-08-01 00:01:30","2013-08-01 00:01:40","2013-08-01 00:01:50","2013-08-01 00:02:00","2013-08-01 00:02:10","2013-08-01 00:02:20","2013-08-01 00:02:30","2013-08-01 00:02:40","2013-08-01 00:02:50","2013-08-01 00:03:00","2013-08-01 00:03:10","2013-08-01 00:03:20","2013-08-01 00:03:30","2013-08-01 00:03:40","2013-08-01 00:03:50","2013-08-01 00:04:00"],labels:{x:45,//调节x偏移//y:-35,//调节y偏移//rotation:25//调节倾斜角度偏移}},方法二：设置滚动条

$(function () {var chart = $("#container").highcharts({chart: {marginBottom: 80},xAxis: {categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]},yAxis: {labels: {align: "left",x: 0,y: -2}},series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]}).highcharts();setTimeout(function(){chart.series[0].setData([]); // 更新 series},1000);});

highcharts如何实现动态刷新实现的是折线图。目前已经实现了从数据库中加载数据，但是定时刷新数据不知道怎么实现。使用chart.series[0].setData(data);每次刷新后表数据就没有了，不知道是不是data的格式写错了，想问下参数data的数据格式的例子。 function getForm(){ //使用JQuery从后台获取JSON格式的数据 $.ajax({ type: "POST", url: "chart.ashx", success: function(data){ chart.series[0].setData(data); }, error:function(msg) { alert("通信错误!"); } }); $(document).ready(function() { //每隔1秒自动调用方法，实现图表的实时更新 window.setInterval(getForm,10000); });

你吃饭了吗，今晚天气好好呦。

这个可以将highcharts.js换成highstock.js即可。 highstock.js就是专门针对x轴刻度为datetime类型且数据多的情况，会自动生成滚动条。 如果你的x轴刻度不为datetime类型，则可以给highcharts的容器加入css控制 产生横向滚动条。

赡椎间盘蹬w

1、数据来源Highcharts 是基于 JavaScript 编写的图表库，自身是没有直接获取服务器（数据库）数据的能力，除了内置的数据功能模块支持直接读取 CVS、HTML 表格、Google SpreadSheets（Google 提供的一种在线表格服务）等数据外，数据来源还需要后端服务支持（动态渲染或提供接口等），另外 JS 还可以直接读取纯文本数据文件。总的来说，数据来源有以下几种方式：服务端直接渲染（包括直接渲染 HTML 页面、HTML 表格）Ajax 请求数据接口（来自服务器数据库的数据或其他数据）Highcharts 内置的数据功能模块读取 CVS、HTML 表格、Google SpreadSheets 数据JavaScript 读取纯文本数据文件，例如 XML 文件、JSON 文件、CSV 文件参考网址：网页链接

请问你说的是柱子本身的宽度呢？ 还是柱状图整幅图的宽度？Origin作图的最基本原则是 “想要修改什么，就直接双击什么（或者在相应位置点击右键）”如果是柱子本身的宽度，那么直接用鼠标双击任意一根柱子，在弹出的对话框中，选择右侧的 Spacing选项卡，在 Gap Between Bars (in%) 选项中，将数值增大。这个数值是柱子之间宽度的大小，用百分比作为单位。增大数值，柱子宽度变窄（也就是柱子之间的间距增大了）。如果是调整整幅柱状图的宽度，那么在坐标轴外的空白处点击鼠标右键【注意，一定要是坐标轴范围外的空白处，Origin在不同位置点击鼠标右键，弹出的菜单内容是不同的，一定要注意】，在弹出的菜单中选择 Properties，在新弹出的对话框中，选择 Print/Dimsensions选项卡，在Dimensions选项中，减小 Width选择中的数值。这个数值就是整幅图的宽度值。

方法一：在Axis（包括xAxis和yAxis）有一个属性tickInterval，number类型，表示间隔，也就是间隔多少个值显示，比如设置为5，则表示每隔5个值才显示一个，在上面的基础上，经过设置tickInterval值为5，效果如下:123456789xAxis: {tickInterval: 5,categories:["2013-08-01 00:00:00","2013-08-01 00:00:10","2013-08-01 00:00:20","2013-08-01 00:00:30","2013-08-01 00:00:40","2013-08-01 00:00:50","2013-08-01 00:01:00","2013-08-01 00:01:10","2013-08-01 00:01:20","2013-08-01 00:01:30","2013-08-01 00:01:40","2013-08-01 00:01:50","2013-08-01 00:02:00","2013-08-01 00:02:10","2013-08-01 00:02:20","2013-08-01 00:02:30","2013-08-01 00:02:40","2013-08-01 00:02:50","2013-08-01 00:03:00","2013-08-01 00:03:10","2013-08-01 00:03:20","2013-08-01 00:03:30","2013-08-01 00:03:40","2013-08-01 00:03:50","2013-08-01 00:04:00"],labels:{x:45,//调节x偏移//y:-35,//调节y偏移//rotation:25//调节倾斜角度偏移}},方法二：设置滚动条

不懂>>>>>>>>>>>>>>>>>>>>

场景：x轴数据过多，出现滚动条 marginBottom：图表的下边距，默认为100，需要根据图表的高度设置合适的值，否则有可能会出现文字未省略，直接被截断的情况，如下图： marginRight：图表的右边距，默认为100，如果右倾斜，也可能会出现文字被截断，见下图：需要根据业务需求动态设置该值 左倾斜可以避免上述情况： 适用场景：图表有最大、最小值标示线，页面滚动可能会导致标示线丢失

有两个方法： 1.调整图表的宽度，越宽分配给每个值的宽度越宽 2.设置pointWidth属性 plotOptions: { column: { pointPadding: 0.2, pointWidth: 30 //柱子的宽度30px } } 设置pointPadding也可以。

alignTicks 默认设置为true$(function() {$("#container").highcharts({chart: {//alignTicks: false,type: "line"},xAxis: {categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]},yAxis: [{title: {text: "Primary Axis"},gridLineWidth: 0}, {title: {text: "Secondary Axis"},opposite: true}],legend: {layout: "vertical",backgroundColor: "#FFFFFF",floating: true,align: "left",x: 100,verticalAlign: "top",y: 70},tooltip: {formatter: function() {return"<b>"+ this.series.name +"</b><br>"+this.x +": "+ this.y;}},plotOptions: {},series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}, {data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],yAxis: 1}]});});

免费和收费都有的针对个人开发者免费，企业收费~

查看一下HTML页面字符集 ,将其改为UTF-8highcarts一定要用utf-8的编码，否则会乱码的

做成散点图，然后用线连起来

x轴有个xAxisy轴是通过series里的data来显示数据var chart = new Highcharts.Chart(); chart.xAxis[0].setCategories(data.Categories); jQuery.each(data.Series, function (i, item) { var series = {type: "spline",data: []}; series.name = item.SeriesName; jQuery.each(item.Values, function (j, item1) {series.data.push(parseFloat(item1));}); chart.addSeries(series); });