Highcharts实现数据点镂空显示(折线图)
程序员文章站
2022-06-09 23:26:44
...
实现效果
highchart实例代码:
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: '镂空数据点'
},
tooltip: {
valueSuffix: '°C',
split: true,
distance: 30,
padding: 5
},
yAxis: {
title: {
text: 'Temperatur'
}
},
plotOptions: {
series: {
lineWidth: 1.5,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: 'red'
},
}
},
data: {
columns: [
["Time", 1451616120000, 1451865660000, 1451952060000, 1452038400000, 1452124800000, 1452211200000, 1452297600000, 1452384000000, 1452470400000, 1452556800000, 1452643200000, 1452729600000, 1452816000000, 1452902400000, 1452988800000, 1453075200000, 1453161600000, 1453248000000, 1453334400000, 1453420800000, 1453507200000, 1453593600000, 1453680000000, 1453766400000, 1453852800000, 1453939200000, 1454025600000],
["Kitchen", 5, 4, 5, 9, 6, 15, 19, 14, 6, 5, 6, 6, 15, 18, 15, 6, 6, 6, 6, 6, 6, 6, 16, 10, 6, 6, 6],
["Living room", 9, 10, 16, 13, 6, 20, 24, 16, 7, 7, 6, 6, 20, 23, 18, 9, 7, 6, 6, 7, 6, 21, 20, 16, 6, 6, 6],
]
}
});
上一篇: PHP的命名空间