Il miglior tutorial Highcharts mappa dinamica Nel 2024, in questo tutorial puoi imparare Aggiornare secondo grafico,Cliccando il Add Data,
In questo capitolo saranno presentati Highcharts mappa dinamica.
Nella sezione precedente che già conosciamo sintassi di configurazione Highcharts. Diamo un'occhiata ad altri Highcharts configurazioni.
metodo load Aggiunto (Grafico evento load) in chart.event. Nel 1000 millisecondi generati casualmente punti dati e generare grafici.
chart: { events: { load: function () { // 图表每秒更新一次 var series = this.series[0]; setInterval(function () { var x = (new Date()).getTime(), // 当期时间 y = Math.random(); series.addPoint([x, y], true, true); }, 1000); } } }
Nome file: highcharts_dynamic_spline.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3write.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script></head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var chart = { type: 'spline', animation: Highcharts.svg, // don't animate in IE < IE 10. marginRight: 10, events: { load: function () { // set up the updating of the chart each second var series = this.series[0]; setInterval(function () { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true); }, 1000); } } }; var title = { text: 'Live random data' }; var xAxis = { type: 'datetime', tickPixelInterval: 150 }; var yAxis = { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }; var tooltip = { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }; var plotOptions = { area: { pointStart: 1940, marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }; var legend = { enabled: false }; var exporting = { enabled: false }; var series= [{ name: 'Random data', data: (function () { // generate an array of random data var data = [],time = (new Date()).getTime(),i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()) }]; var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.legend = legend; json.exporting = exporting; json.series = series; json.plotOptions = plotOptions; Highcharts.setOptions({ global: { useUTC: false } }); $('#container').highcharts(json); }); </script> </body> </html>
L'output sopra esempio è:
Aggiungere metodo click (click evento sull'intera area del tracciato grafico verificato) in proprietà chart.event. Questo metodo sulla superficie di terreno grafico aggiungerà un nuovo punto di dati click si verifica.
chart: { events: { click: function (e) { // 获取点击坐标和数据项 var x = e.xAxis[0].value, y = e.yAxis[0].value, series = this.series[0]; // 添加点击的坐标 series.addPoint([x, y]); } } }
Nome file: highcharts_dynamic_click.htm
<html> <head> <title>Highcharts 教程 | 本教程(w3write.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/try/demo_source/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var chart = { type: 'scatter', margin: [70, 50, 60, 80], events: { click: function (e) { // find the clicked values and the series var x = e.xAxis[0].value, y = e.yAxis[0].value, series = this.series[0]; // Add it series.addPoint([x, y]); } } }; var title = { text: 'User supplied data' }; var subtitle = { text: 'Click the plot area to add a point. Click a point to remove it.' }; var xAxis = { gridLineWidth: 1, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60 }; var yAxis = { title: { text: 'Value' }, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60, plotLines: [{ value: 0, width: 1, color: '#808080' }] }; var legend = { enabled: false }; var exporting = { enabled: false }; var plotOptions = { series: { lineWidth: 1, point: { events: { 'click': function () { if (this.series.data.length > 1) { this.remove(); } } } } } }; var series= [{ data: [[20, 20], [80, 80]] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.legend = legend; json.exporting = exporting; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); }); </script> </body> </html>
L'output sopra esempio è: