highcharts开始使用highcharts


备注

Highcharts是一个JavaScript图表库,可以使用JSON格式的选项进行设置。它默认支持各种图表类型 ,也允许插件。它也是Highstock和Highmaps等几款副产品的核心。

Highcharts可免费用于非商业和个人用途,只有商业应用才需要许可证。

版本

发布日期
5.0.0 2016年9月29日
4.0.0 2014年4月22日
3.0.0 2013年3月22日
2.0.0 2010-07-13
1.0.0 2009-11-27

颜色

Highcharts中 ,有一个数组包含图表系列的默认颜色。使用所有颜色后,将再次从头开始拉出新颜色。

版本4.x和5.x的默认颜色为:

colors: [
    '#7cb5ec', 
    '#434348', 
    '#90ed7d', 
    '#f7a35c', 
    '#8085e9', 
    '#f15c80', 
    '#e4d354', 
    '#2b908f', 
    '#f45b5b', 
    '#91e8e1'
]
 

Highcharts 3.x中 ,默认颜色为:

colors: [
    '#2f7ed8', 
    '#0d233a', 
    '#8bbc21', 
    '#910000', 
    '#1aadce', 
    '#492970', 
    '#f28f43', 
    '#77a1e5', 
    '#c42525', 
    '#a6c96a'
 

]

Highcharts 2.x中 ,默认颜色为:

colors: [
    '#4572A7', 
    '#AA4643', 
    '#89A54E', 
    '#80699B', 
    '#3D96AE', 
    '#DB843D', 
    '#92A8CD', 
    '#A47D7C', 
    '#B5CA92'
]
 

兼容性

支持的版本
IE浏览器 6.0 +
火狐 2.0 +
1.0 +
苹果浏览器 4.0 +
歌剧 9.0 +
iOS(Safari) 3.0 +
Android浏览器 2.0 +

Highcharts支持旧版浏览器的jQuery版本1.6+和现代浏览器的2.0+版本。

你好,世界

首先在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);
     

这创建了如下图 - 小提琴

有许多配置选项可以添加到图表中,一些常见的选项是,

可在此处找到所有配置选项的完整列表。

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

安装或设置

获得Highcharts的方法:

npm install highcharts
 
  • 通过凉亭;
bower install highcharts
 

要从供应商的CDN加载主库,只需将以下内容添加到您的代码中:

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

highcharts.js 声明加载补充库,例如导出模块。

直接从Highcharts调用库将为您提供最新版本。但是,如果您具有最适合某个版本的特定图表,或者您希望优化网站的性能,则可以考虑在本地存储这些文件。

以下资源提供有关安装和配置Highcharts的详细信息,以及可用于在默认安装之外自定义图表的补充库和模块。