HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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 教程 | 本教程(w3resource.net)</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 教程 | 本教程(w3resource.net)</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: