highcharts 你好，世界

示例

通过包括开始highcharts.js在你的index.html

<html>
  <head>
    <script xx_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文档的一个好地方。

基础教程