Highcharts grafico della curva di carico di dati asincroni
L'esempio seguente mostra in modo asincrono caricare grafico della curva dei dati. Qui si carica il file CSV dal asincrono da jQuery.getJSON () metodo:
Nella sezione precedente che già conosciamo sintassi di configurazione Highcharts. Diamo un'occhiata a un esempio completo:
Importazione di file data.js
caricamento dei dati asincroni necessario introdurre il seguente file js:
<script src="http://code.highcharts.com/modules/data.js"></script>
configurazione
asse X
Un asse settimanale intervallo di X:
var xAxis = { tickInterval: 7 * 24 * 3600 * 1000, // 一周 tickWidth: 0, gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 } };
asse Y
Un intervallo dell'asse Y settimanale:
Configurazione a due asse Y:
var yAxis = [{ // 左边 Y 轴 title: { text: null }, labels: { align: 'left', x: 3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false },{ // 右边 Y 轴 linkedTo: 0, gridLineWidth: 0, opposite: true, title: { text: null }, labels: { align: 'right', x: -3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false } ];
plotOptions
plotOptions utilizzati per impostare i punti dati grafico proprietà relative.
var plotOptions = { series: { cursor: 'pointer', point: { events: { click: function (e) { hs.htmlExpand(null, { pageOrigin: { x: e.pageX || e.clientX, y: e.pageY || e.clientY }, headingText: this.series.name, maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' visits', width: 200 }); } } }, marker: { lineWidth: 1 } } }
Esempi
Nome file: highcharts_line_ajax.html
<html> <head> <title>Highcharts 教程 | 本教程(w3big.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> <script src="http://code.highcharts.com/modules/data.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var title = { text: 'Daily visits at www.highcharts.com' }; var subtitle = { text: 'Source: Google Analytics' }; var xAxis = { tickInterval: 7 * 24 * 3600 * 1000, // one week tickWidth: 0, gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 } }; var yAxis = [{ // left y axis title: { text: null }, labels: { align: 'left', x: 3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false },{ // right y axis linkedTo: 0, gridLineWidth: 0, opposite: true, title: { text: null }, labels: { align: 'right', x: -3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false } ]; var tooltip = { shared: true, crosshairs: true } var legend = { align: 'left', verticalAlign: 'top', y: 20, floating: true, borderWidth: 0 }; var plotOptions = { series: { cursor: 'pointer', point: { events: { click: function (e) { hs.htmlExpand(null, { pageOrigin: { x: e.pageX || e.clientX, y: e.pageY || e.clientY }, headingText: this.series.name, maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' visits', width: 200 }); } } }, marker: { lineWidth: 1 } } } var series = [{ name: 'All visits', lineWidth: 4, marker: { radius: 4 } }, { name: 'New visitors' }] var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; json.plotOptions = plotOptions; $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) { var data = { csv: csv }; json.data = data; $('#container').highcharts(json); }); }); </script> </body> </html>
L'output sopra esempio è: