highCharts图表插件的使用

柔光的暖阳◎ 2022-08-01 00:18 284阅读 0赞

# HighCharts使用心得 #

## 前言： ##

之前很早的一个项目中使用过highcharts，感觉挺方便的，图表类型也比较丰富，而且还支持数据的下钻，但是如果投入商业使用的话还会有一些版权的问题，所以后来就使用了EChart，这是百度开发的一个开源的图表插件，图表类型也很丰富，而且还有交互，对地图的支持也很好，可以免费的使用。在之前的一篇文章里，已经总结过了，今天主要跟大家分享一下，之前总结的Highcharts的一些使用心得，希望能够对大家有所帮助。

## 1.  准备工作------下载HighCharts插件 ##

跟ECharts一样，HighCharts也需要下载相应的插件，不过HightCharts的插件很简单，只有一个highcharts.js文件。可以从HighCharts官网上下载，具体地址如下：[http://www.highcharts.com/download][http_www.highcharts.com_download]

另注：

如果需要导出图表，则需要exporting.js文件

如果需要一些特殊的图形呈现，则还需要下载highcharts-more.js

## 2.  新建一个解决方案或网站，引用下载的highcharts.js文件，进行图表展示。 ##

在这个过程中，我会逐步的跟大家讲解如何使用highcharts.js进行图表展示。

### 2.1 新建解决方案（或网站），目录结构如下 ###

![082324210838288.png][]

另注：

一般情况下如果不需要导出图片、且只使用常规的图形，exportting.js和highchart-more.js可以不要，只留一个highcharts.js文件即可。

其中的HighCharts.js文件为我自己总结的使用帮助文件，主要用来配置图表类型、图表数据的处理、格式化等操作，下边会进一步讲解。

此外需要注意的是这里引用的Jquery文件版本为最近版本，VS里边默认的为1.4.1的版本太低，最新的highcharts需要高版本的jQuery文件。

### 2.2 HighChart.js文件介绍 ###

在2.1中对此文件有一个初步的介绍，这一小节里专门来介绍这个文件。该文件的主要功能是用来配置各种图表类型的配置项，同时对用户提供的参数进行格式化、图表的呈现等功能。

文件的目录结构如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> 
    <div>
      52 
    </div> 
    <div>
      53 
    </div> 
    <div>
      54 
    </div> 
    <div>
      55 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code> HighChart = { </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ChartDataFormate: { </code> 
      <code>//数据格式化</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>FormateNOGroupData: function (data) { </code> 
      <code>//处理不分组的数据</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>categories = [];</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>datas = [];</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>i = 0; i &lt; data.length; i++) { </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>categories.push(data[i].name ||</code> 
      <code>""</code> 
      <code>);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>datas.push([data[i].name, data[i].value || 0]);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>{ category: categories, data: datas };</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}，…………</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ChartOptionTemplates: { </code> 
      <code>//图表配置项</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Pie: function (data, name, title) { </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>pie_datas = HighChart.ChartDataFormate.FormateNOGroupData(data);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>option = { </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>chart: { </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>plotBackgroundColor:</code> 
      <code>null</code> 
      <code>,</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>plotBorderWidth:</code> 
      <code>null</code> 
      <code>,</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>plotShadow:</code> 
      <code>false</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>…….</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>option;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>RenderChart: function (option, container) { </code> 
      <code>//页面渲染</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.highcharts(option);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

完整代码：

[\+  ][ ]

### 2.3 具体的页面展示 ###

#### 2.3.1 饼图 ####

l  页面引用

l  效果展示

![082324381776631.png][]

#### 2.3.2 折线图 ####

l  页面引用

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script src=</code> 
      <code>"../Scripts/jquery-1.11.0.min.js"</code> 
      <code>type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script src=</code> 
      <code>"../Statics/highcharts.js"</code> 
      <code>type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script src=</code> 
      <code>"../Statics/exporting.js"</code> 
      <code>type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script src=</code> 
      <code>"../Statics/HighChart.js"</code> 
      <code>type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(function () { </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>data = [</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-01'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'olive'</code> 
      <code>, value: 116 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-01'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'momo'</code> 
      <code>, value: 115 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-01'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'only'</code> 
      <code>, value: 222 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-01'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'for'</code> 
      <code>, value: 324 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-02'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'olive'</code> 
      <code>, value: 156 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-02'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'momo'</code> 
      <code>, value: 185 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-02'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'only'</code> 
      <code>, value: 202 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-02'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'for'</code> 
      <code>, value: 34 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-03'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'olive'</code> 
      <code>, value: 16 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-03'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'momo'</code> 
      <code>, value: 51 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-03'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'only'</code> 
      <code>, value: 22 },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-03'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'for'</code> 
      <code>, value: 84 }</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>];</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>opt = HighChart.ChartOptionTemplates.Line(data, </code> 
      <code>'Love-Rate'</code> 
      <code>, </code> 
      <code>"折线图示例"</code> 
      <code>);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>container = $(</code> 
      <code>"#container"</code> 
      <code>);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>HighChart.RenderChart(opt, container);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

l  效果展示

![082324494898409.png][]

#### 2.3.3 柱形图 ####

l  页面引用

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script src=</code> 
      <code>"../Scripts/jquery-1.11.0.min.js"</code> 
      <code>type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script src=</code> 
      <code>"../Statics/highcharts.js"</code> 
      <code>type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script src=</code> 
      <code>"../Statics/exporting.js"</code> 
      <code>type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script src=</code> 
      <code>"../Statics/HighChart.js"</code> 
      <code>type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(function () { </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>data = [</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-01'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'olive'</code> 
      <code>, value: 116 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-01'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'momo'</code> 
      <code>, value: 115 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-01'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'only'</code> 
      <code>, value: 222 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-01'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'for'</code> 
      <code>, value: 324 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-02'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'olive'</code> 
      <code>, value: 156 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-02'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'momo'</code> 
      <code>, value: 185 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-02'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'only'</code> 
      <code>, value: 202 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-02'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'for'</code> 
      <code>, value: 34 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-03'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'olive'</code> 
      <code>, value: 16 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-03'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'momo'</code> 
      <code>, value: 51 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-03'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'only'</code> 
      <code>, value: 22 },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ name:</code> 
      <code>'2013-03'</code> 
      <code>, </code> 
      <code>group</code> 
      <code>: </code> 
      <code>'for'</code> 
      <code>, value: 84 }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>];</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>opt = HighChart.ChartOptionTemplates.Bars(data, </code> 
      <code>''</code> 
      <code>,</code> 
      <code>''</code> 
      <code>,</code> 
      <code>'Love-Rate'</code> 
      <code>,</code> 
      <code>"分组柱形图示例"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>container = $(</code> 
      <code>"#container"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>HighChart.RenderChart(opt, container);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>opt1 = HighChart.ChartOptionTemplates.Bars(data, </code> 
      <code>true</code> 
      <code>,</code> 
      <code>''</code> 
      <code>,</code> 
      <code>'Love-Rate'</code> 
      <code>,</code> 
      <code>"堆积柱形图示例"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>container1 = $(</code> 
      <code>"#container1"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>HighChart.RenderChart(opt1, container1);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>opt2 = HighChart.ChartOptionTemplates.Bars(data, </code> 
      <code>''</code> 
      <code>,</code> 
      <code>true</code> 
      <code>,</code> 
      <code>'Love-Rate'</code> 
      <code>,</code> 
      <code>"堆积百分比柱形图示例"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>container2 = $(</code> 
      <code>"#container2"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>HighChart.RenderChart(opt2, container2);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

l  展示效果

分组柱形图

![082325023338685.png][]

堆积图

![082326446774851.png][]

堆积百分比图

![082328228955679.png][]

后记：

这里只是列出了常用的一些图表类型，如果有特殊需要的话还可以进行自主的去抽象扩展。后续有时间的话，我也会对新的图表类型进行扩展，还有，关于HighChart里边的数据下钻的功能，这里也没有列出来，个人觉得这种图表的交互，抽象出来意义不是很大，后续再看看吧，有时间的话就再试着弄弄。

[http_www.highcharts.com_download]: http://www.highcharts.com/download
[082324210838288.png]: /images/20220801/96dee8046093496eb1f424c2bdb4306d.png
[ ]: http://www.cnblogs.com/Olive116/p/3777021.html#
[082324381776631.png]: /images/20220801/fc76c4d7c5df44269c4e3d5cb20adf71.png
[082324494898409.png]: /images/20220801/775635cd088e414c81112b34c5a38ee3.png
[082325023338685.png]: /images/20220801/ffc7b908e4174eeca25b7cca5fe1b0a3.png
[082326446774851.png]: /images/20220801/f17ce0d0efe442d9bf72c8c558cdf166.png
[082328228955679.png]: /images/20220801/77141deb160d422793305869b77f0ad3.png