The best Highcharts dynamic map Tutorial In 2024, In this tutorial you can learn Update second graph,By clicking the Add Data,
This chapter we will introduce Highcharts dynamic map.
In the previous section we already know Highcharts configuration syntax. Let's look at the other configurations Highcharts.
Added load method (Chart load event) chart.event property. In 1000 milliseconds randomly generated data points and generate charts.
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); } } }
File name: 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>
The above example output is:
Add click method (click event on the entire chart plot area occurred) in chart.event property. This method on the chart plot area will add a new data point click occurs.
chart: { events: { click: function (e) { // 获取点击坐标和数据项 var x = e.xAxis[0].value, y = e.yAxis[0].value, series = this.series[0]; // 添加点击的坐标 series.addPoint([x, y]); } } }
File name: 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>
The above example output is: