Highcharts - Ajax 加载的数据图表

前一个
下一个

在此，我们将讨论 ajax 加载的数据图表示例。首先，我们将使用 jQuery.getJSON() 方法向 Highcharts.Com 发出 ajax 调用以加载 csv 文件，在检索到数据后，我们将使用接收到的数据填充图表并绘制图表。

我们在 Highcharts 配置语法 章节中理解了用于绘制图表的大部分配置。

导入 data.js

为了使用 ajax 数据，导入以下脚本。

<script src = "https://code.highcharts.com/modules/data.js"></script>

配置

让我们现在了解额外的配置/步骤。

xAxis

将刻度间隔配置为基于 X 轴上的周度。

var xAxis = {
   tickInterval: 7 * 24 * 3600 * 1000, // one week
   tickWidth: 0,
   gridLineWidth: 1,
   
   labels: {
      align: 'left',
      x: 3,
      y: -3
   }
};

yAxis

在 y 轴上配置两个轴。

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
   }
];

plotOptions

plotOptions 用于控制图表各个部分（如序列、序列上的标记）的格式。

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
      }
   }
}

示例

highcharts_line_ajax.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
      <script src = "https://code.highcharts.com/highcharts-more.js"></script>    
      <script src = "https://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>

结果

验证结果。

highcharts_line_charts.htm
打印页面
前一个
下一个
广告