欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Highcharts实现数据点镂空显示(折线图)

程序员文章站 2022-06-09 23:26:44
...

实现效果
Highcharts实现数据点镂空显示(折线图)
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],
		]
	}
});

相关标签: Highcharts