ハイチャート-Ajax Loaded Data Chart

ここでは、ajaxロードされたデータチャートの例を説明します。まず、ajax呼び出しを行って、* jQuery.getJSON（）*メソッドを使用してHighcharts.Comからcsvファイルをロードします。データが取得されると、受信したデータでチャートを作成し、チャートを描画します。

link：/highcharts/highcharts_configuration_syntax [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軸に2つの軸を構成します。

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) {
               hslExpand(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_*

<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) {
                           hslExpand(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-ajax

目次

ハイチャート-Ajax Loaded Data Chart

data.jsをインポートする

構成

xAxis

yAxis

plotOptions

例

結果