Ajax 加载数据可点击点（Ajax loaded data, clickable points）

优质

小牛编辑

134浏览

2023-12-01

在这里，我们将讨论ajax加载数据图表的示例。首先，我们将使用jQuery.getJSON()方法进行ajax调用以从Highcharts.Com加载csv文件，当检索到数据时，我们将使用接收的数据填充图表并绘制图表。

我们已经了解了用于在Highcharts Configuration Syntax章节中绘制图表的大多数配置。

Import data.js

要使用ajax数据，请导入以下脚本。

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

配置 (Configurations)

现在让我们了解其他配置/步骤。

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

例子 (Example)

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>