Vue Highchart中chart属性
本节主要讲解图表配置，对应的 API 位置为 chart，主要内容包括图表全局样式、绘图区、图表事件、等相关内容。
对于 C语言风格的开发者来说，下面的方式更符合编写习惯
var oiptions = new Object();
options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'line';
options.series = new Array();
options.series[0] = new Object();
options.series[0].name = '小明';
options.series[0].data = new Array(1, 0, 4);
上述编写方式在 JS 里是不推荐的，更好的做法应该是
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
series: [{
name: '小明',
data: [1, 0, 4]
}]
}
1、图表类型
通过 chart.type 来指定图表类型，表示如果默认图表类型，即如果 series 中没有指定 type， 那么图表的类型就由该属性来确定。highcharts 支持的所有图表类型见 plotOptions。
2、图表缩放
图表缩放包括缩放（zoom）和平移（pan），对应的属性有：
- zoomType ： 缩放类型，值可以是
“x”、“y”、“xy”，分别表示水平缩放、竖直缩放、平面缩放 - 缩放恢复按钮：可以指定按钮的样式、位置等，见 resetZoomButton，按钮的文字可以通过 lang 中的属性来指定
- selectionMarkerFill ：选中背景色，详细参考 API 文档
- panKey：平移键，默认是 “Shift”，即在启用平移后，按住指定的按键即可对图表进行平移操作，在线试一试
- panning ： 是否启用平移，启用平移后，按住平移键，然后就可以用鼠标对图表进行平移操作（即平移操作是平移键加鼠标拖动）
-
chartOptions: {
chart: {
type: 'line',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: "物联网数据"
},
subtitle: {
text: "数据来源：物联网平台"
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: this.attribute
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle"
},
series: [
{
name: this.attribute,
data: []
},
],
responsive: {
rules: [
{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: "horizontal",
align: "center",
verticalAlign: "bottom"
}
}
}
]
}
},
3、其他
- 图表反转 ： 图表反转指的是将图表的 x轴和 y轴进行对调操作，对应的只需要设置
chart.inverted = true即可。 - 图表动画 ：
chart.animation可以设置图表的全局动画效果，这里的动画指的是图表更新时的动画效果，而图表初始化的动画是在plotOptions.series.animation中启用和关闭的。 - 图表自适应 ：前面说过通过设置图表容器的
min-width可以让图表自适应，这个开关对应的属性是chart.reflow，另外，还可以通过 API 接口Chart.reflow在外部对图表进行自适应操作，在线试一试
