Hello World

Created: November-22, 2018

首先在你的 index.html 中加入 highcharts.js

<html>
  <head>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head>

新增 <div> 以包含你的圖表

  <body>
    <div id="chart">
      <!-- Chart goes here -->
    </div>

指定配置以建立圖表。建立圖表所需的最小配置是 -

圖表在哪裡？ - chart.renderTo

要繪製的資料是什麼？ - 有幾種方法可以輸入要繪製的資料; 其中最常見的是系列物件。

 var chartOptions = {
     chart: {
         renderTo: 'chart'  
     },
     series: [{      
         data: [1, 2]
     }]  
 };
 var chartHandle = Highcharts.Chart(chartOptions);

這建立瞭如下圖 - 小提琴。

有許多配置選項可以新增到圖表中，一些常見的選項是，

chart.type - 你想要繪製哪種型別的圖表？
title - 圖表標題的配置
xAxis / yAxis - 圖表的 x 軸/ y 軸配置

可在此處找到所有配置選項的完整列表。

    <script>
    var chartOptions = {
      chart: {
        renderTo: 'chart',
        type: 'bar'
      },
      title: {
        text: 'Hello Highcharts'
      },
      xAxis: {
        categories: ['Hello', 'World']
      },
      yAxis: {
        title: 'Value'
      },
      series: [{
        name: 'Highcharts Intro',
        data: [1, 2]
      }]
    };

    var chart = new Highcharts.Chart(chartOptions);
    
    </script>
  </body>
</html>

JSFiddle 示例

在 Highcharts doc 開始的好地方就在這裡。