异步加载 170 万个数据 | JShare

/** * Load new data depending on the selected min and max */ function afterSetExtremes(e) { var chart = $('#container').highcharts(); chart.showLoading('Loading data from server...'); $.getJSON('https://demo-live-data.highcharts.com/aapl-historical.json?start=' + Math.round(e.min) + '&end=' + Math.round(e.max) + '', function (data) { chart.series[0].setData(data); chart.hideLoading(); }); } // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php $.getJSON('https://demo-live-data.highcharts.com/aapl-historical.json', function (data) { // Add a null value for the end date data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]); // create the chart Highcharts.stockChart('container', { chart : { type: 'candlestick', zoomType: 'x' }, navigator : { adaptToUpdatedData: false, series : { data : data } }, scrollbar: { liveRedraw: false }, tooltip: { split: false }, title: { text: 'AAPL history by the minute from 1998 to 2011' }, subtitle: { text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading' }, rangeSelector : { buttons: [{ type: 'hour', count: 1, text: '1h' }, { type: 'day', count: 1, text: '1d' }, { type: 'month', count: 1, text: '1m' }, { type: 'year', count: 1, text: '1y' }, { type: 'all', text: 'All' }], inputEnabled: false, // it supports only days selected : 4 // all }, xAxis : { events : { afterSetExtremes : afterSetExtremes }, minRange: 3600 * 1000 // one hour }, yAxis: { floor: 0 }, series : [{ data : data, dataGrouping: { enabled: false } }] }); }); <div id="container" style="min-width:400px;height:400px"></div> {"doctype":0,"resouces":"1,4,7,52","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"}