HighCharts中的Ajax请求的2D折线图
设计源码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> <script type="text/javascript" src="../scripts/js/highcharts.js"></script> <script type="text/javascript"> $(function(){ // 获取CSV数据并且创建图 $.get('data/lineAjax.csv', function (csv) { $('#lineAjaxChart').highcharts({ data: { csv: csv }, title: { text: '折线' }, xAxis: { type: 'datetime', tickInterval: 7 * 24 * 3600 * 1000, // one week tickWidth: 0, gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 } }, yAxis: [{ // 主Y轴 title: { text: null }, labels: { align: 'left', x: 3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, showFirstLabel: true }, { // 次Y轴 linkedTo: 0, gridLineWidth: 0, opposite: true, title: { text: null }, labels: { align: 'right', x: -3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, showFirstLabel: false }], legend: { align: 'left', verticalAlign: 'top', y: 20, floating: true, borderWidth: 0 }, tooltip: { shared: true, crosshairs: true }, plotOptions: { series: { cursor: 'pointer', point: { events: { click: function() { hs.htmlExpand(null, { pageOrigin: { x: this.pageX, y: this.pageY }, headingText: this.series.name, maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ this.y +' visits', width: 200 }); } } }, marker: { lineWidth: 1 } } }, series: [{ name: 'All visits', lineWidth: 4, marker: { radius: 4 } }, { name: 'New visitors' }] }); }); }); </script> </head> <body> <div id="lineAjaxChart" style="width: 1200px; height: 500px; margin: 0 auto"></div> </body> </html>