100 万数据点的散点图 | JShare

var data = [],
	n = 1000000,
	i;
for (i = 0; i < n; i += 1) {
	data.push([
		Math.pow(Math.random(), 2) * 100,
		Math.pow(Math.random(), 2) * 100
	]);
}
if (!Highcharts.Series.prototype.renderCanvas) {
	throw 'Module not loaded';
}
console.time('scatter');
Highcharts.chart('container', {
	chart: {
		zoomType: 'xy',
		height: '100%'
	},
	boost: {
		useGPUTranslations: true,
		usePreAllocated: true
	},
	xAxis: {
		min: 0,
		max: 100,
		gridLineWidth: 1
	},
	yAxis: {
		// Renders faster when we don't have to compute min and max
		min: 0,
		max: 100,
		minPadding: 0,
		maxPadding: 0,
		title: {
			text: null
		}
	},
	title: {
		text: 'Scatter chart with 1 million points'
	},
	legend: {
		enabled: false
	},
	series: [{
		type: 'scatter',
		color: 'rgba(152,0,67,0.1)',
		data: data,
		marker: {
			radius: 0.5
		},
		tooltip: {
			followPointer: false,
			pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
		}
	}]
});
console.timeEnd('scatter');

<div id="container"></div>

#container {
	min-width: 380;
	max-width: 600px;
	margin: 0 auto;
}

{"doctype":0,"resouces":"3,7,40,https://img.hcharts.cn/highcharts/modules/boost-canvas.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","meta":""}

100 万数据点的散点图 | JShare

模板（查看所有模板）