#### Highcharts.line 折线图
// create the chart
Highcharts.chart('container', {
chart: {
type: 'spline', // 曲线
// inverted: false // true xy轴旋转
},
title: { // 标题
text: '月平均气温'
},
subtitle: { // 副标题
text: '数据来源: WorldClimate.com'
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
},
plotOptions: {
line: { // 基础折现图
dataLabels: {
// 开启数据标签 显示点的数值
enabled: true
},
// 关闭鼠标跟踪,对应的提示框、点击事件会失效
enableMouseTracking: false
},
spline: { // 平滑折线图
marker: { // 标注点设计
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
},
series: {
allowPointSelect: true, // 允许点选择
point: { // 标注点的事件
events: {
select: function () {
var text = this.category + ': ' + this.y + ' was last selected',chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label(text, 100, 70).attr({
padding: 10,
r: 5,
fill: Highcharts.getOptions().colors[1],
zIndex: 5
}).css({ color: '#FFFFFF' }).add();
} else {
chart.lbl.attr({ text: text });
}
}
}
}
}
},
series: [{
name: '苹果',
data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
},{
name: '香橙',
data: [2,3,4,5,6,7,8,9,10,11,12,43,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]
},{
name: '葡萄',
data: [13,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33]
}]
});