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 开始的好地方就在这里。