前言： 之前很早的一個項目中使用過highcharts，感覺挺方便的，圖表類型也比較豐富，而且還支持數據的下鑽，但是如果投入商業使用的話還會有一些版權的問題，所以後來就使用了EChart，這是百度開發的一個開源的圖表插件，圖表類型也很豐富，而且還有交互，對地圖的支持也很好，可以免費的使用。在之前的一篇文章裡，已經總結過了，今天主要跟大家分享一下，之前總結的Highcharts的一些使用心得，希望能夠對大家有所幫助。 1. 准備工作------下載HighCharts插件 跟ECharts一樣，HighCharts也需要下載相應的插件，不過HightCharts的插件很簡單，只有一個highcharts.js文件。可以從HighCharts官網上下載，具體地址如下：http://www.highcharts.com/download 另注： 如果需要導出圖表，則需要exporting.js文件 如果需要一些特殊的圖形呈現，則還需要下載highcharts-more.js 2. 新建一個解決方案或網站，引用下載的highcharts.js文件，進行圖表展示。 在這個過程中，我會逐步的跟大家講解如何使用highcharts.js進行圖表展示。 2.1 新建解決方案（或網站），目錄結構如下 另注： 一般情況下如果不需要導出圖片、且只使用常規的圖形，exportting.js和highchart-more.js可以不要，只留一個highcharts.js文件即可。 其中的HighCharts.js文件為我自己總結的使用幫助文件，主要用來配置圖表類型、圖表數據的處理、格式化等操作，下邊會進一步講解。 此外需要注意的是這裡引用的Jquery文件版本為最近版本，VS裡邊默認的為1.4.1的版本太低，最新的highcharts需要高版本的jQuery文件。 2.2 HighChart.js文件介紹 在2.1中對此文件有一個初步的介紹，這一小節裡專門來介紹這個文件。該文件的主要功能是用來配置各種圖表類型的配置項，同時對用戶提供的參數進行格式化、圖表的呈現等功能。 文件的目錄結構如下： var HighChart = { ChartDataFormate: {//數據格式化 FormateNOGroupData: function (data) {//處理不分組的數據 var categories = []; var datas = []; for (var i = 0; i < data.length; i++) { categories.push(data[i].name || ""); datas.push([data[i].name, data[i].value || 0]); } return { category: categories, data: datas }; }，………… }, ChartOptionTemplates: {//圖表配置項 Pie: function (data, name, title) { var pie_datas = HighChart.ChartDataFormate.FormateNOGroupData(data); var option = { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, ……. }; return option; }, RenderChart: function (option, container) {//頁面渲染 container.highcharts(option); } 完整代碼： + View Code 2.3 具體的頁面展示 2.3.1 餅圖 l 頁面引用 <script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="../Statics/highcharts.js" type="text/javascript"></script> <script src="../Statics/exporting.js" type="text/javascript"></script> <script src="../Statics/HighChart.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var data = [{ name: 'olive', value: 116 }, { name: 'momo', value: 115 }, { name: 'only', value: 222 }, { name: 'for', value: 324}]; var opt = HighChart.ChartOptionTemplates.Pie(data,'Love-Rate',"餅圖示例"); var container = $("#container"); HighChart.RenderChart(opt, container); }); </script>
