網上的例子，資料都是寫死的，有點不實用吧

我在這裡舉一個，展示功能需求的資料。按需從資料庫獲取並畫圖展示  (本例子結合 angular.js，其他前臺框架同理 從後臺獲取資料即可)

1.首先要引入Jquery.JS，再引入相關highChar.js

如果結合前臺框架使用的話 ，比如 angular.js vue.js 這些前臺框架，要注意引入順序，highChar.js的引入必須在他們後面

（等等會附上我的程式碼連結）

2.然後開始解析畫圖對應的 js程式碼  

a. 首先是html或者jsp頁面的程式碼 如下

<div style="width:50%; height:300px
 
;" id="chart2" ></div>

  b.然後是 angular,非同步獲取後臺資料，ajax vue 同理。

   score 資料例子：

  score:[

{peopleNum: 5,    totalSale: 200,   goodsName: 蘋果},

{peopleNum: 52,  totalSale: 800,   goodsName: 榴蓮},

{peopleNum: 11,  totalSale: 300,   goodsName: 水蜜桃}

]

$http.get("/statistics/getGameGuessDetail.shtml"
 
, {params: {gameId: gameID}})
    .success(function (data) {//這兩行是angular.js 請求後臺回去需求資料的方法，
        $scope.model=data; //data是回覆的資料， 賦值給 $scope.model    

drawLines("chart", $scope.model.goods,  //data.goods 是一個比分陣列{  //drawLines是畫圖的方法， 如下 將需要顯示的資料 傳進去 封裝給 highChar畫出來
                title:'比分投注統計’，yis:[
                    {title
 
:"購買人數",field:"peopleNum"}, //需要統計的型別 1
{title:"累計收入",field:"totalSale"}],//需要統計的型別 2

xis:{title:"商品名", field:"goodsName"}})//橫座標

  c.最後就是畫圖的js程式碼， 對應 b.中的 drawLines()方法

function drawLines(divId, data,type, option) {            //引數 分別接收 html顯示圖示的 div的Id-divId
                                                           //type這個可以忽略 ，是設定 字型傾斜度的
                                                           // 要畫圖的資料--data
                                                           //設定的圖表屬性--option   就是b.方法中傳過來的3個引數
$("#" + divId).empty();                                //情況  html中 對應 div的 資料
var series = [];                                       //highChar 畫的資料 就是 series這個物件，
        //基礎的以蘋果為例
for (var i in option.yis) {                            //封裝 資料，存進 series  options.yis 是b.中 yis陣列
var yi = option.yis[i];                             //賦值給yi，例第一條   {title:"購買人數",field:"peopleNum"}
var se = {name:yi.title, data:[]};                  //設 se物件 name為 yi.title, data 為空陣列
series.push(se);                                    //將se push 存進 series 陣列
var c = 0;                                          //c為統計 需要統計的型別的  總值，比如統計所有商品的總購買人數
for (var j in data) {                              //遍歷 要顯示的資料陣列
var item = data[j];                             //item 這時 為蘋果 這個物件
var x =item[option.xis.field] ;                  //設X 為 b.中的 xis的field  即 蘋果
var y = item[yi.field];                         //設y為 對應的   購買人數
se.data.push([x,y]);                            //push進 se.data 陣列
c += y;                                         //c 最後會等於蘋果、榴蓮、水蜜桃 總購買人數之和
}
        if(se.name=='購買人數'){                           //如果為'購買人數的話' 就設定對應的Y周 為第二條Y軸
se.yAxis=1;
}else{
            se.yAxis=0;                                    //否為 第一條Y軸 //如果不需要雙y軸 這段程式碼去掉就好，預設為左軸
}
        se.name += " (" + c + ")";                          //設定總數顯示 最後結果為  購買人數（68） 累計收入（1300）
}
       //以上是 資料的整理封裝 成 series  給highChar畫  以下設定 畫圖的佈局 樣式
$('#' + divId).highcharts({                              // 對應html的 div-id
chart: {
            type: 'spline'                                   //畫圖的型別  spline-折線圖，column-柱狀圖,area-面積圖,pie-餅圖
},
title: {
            text: option.title                                 //設定圖表的標題，angular.js傳過來的對應的值
},
subtitle: {
            text: option.subtitle || ''
},
exporting:{                                             //這裡配置圖表的匯出功能為false 沒有配置的時候 圖表的的右上方會有一個匯出的按鈕
enabled:false
},
credits : {                                             //這裡配置的是取消右下角  Highcharts版權連線 請允許我這麼說
enabled : false
},
colors: [                                                 //這裡配置的是柱狀圖/折線圖/拼圖上那幾根柱子/線條/面積/餅塊應該是什麼顏色的
'#CC3300',
'#666FF'
],
//xAxis: {
        //    type: 'datetime',                    //另一種X軸的顯示，時間X軸， 有的資料是按時間顯示的
        //    dateTimeLabelFormats: {
        //        millisecond: '%H:%M',
        //        second: '%H:%M',
        //        minute: '%H:%M',
        //        hour: '%H:%M',
        //        day:'%m月%d',
        //        month: '%e 月 %b',
        //        year: '%b'
        //    }
        //},
xAxis:{                                  
            type: 'category',                                          //常規的為 種類X軸顯示。
labels: {
                rotation: type, //字型傾斜
align: 'right',
style: { font: 'normal 20px 宋體',
color: 'red',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
            }
        },
yAxis: [{                                   //雙Y軸 用[]括起來，多軸同理， 單Y軸的話  把 [] 去掉
min:0,                                   //設定y軸的最小值，  max為設定最大值
labels: {                                //在labels裡可以配置formatter屬性可以對y軸設定單位之類的個性化東西
format: '{value}RMB',
style: {
                    color: '#89A54E'
}
            },
title: {
                rotation: -45,                              //字型傾斜
text: '累計收入',
style: {
                    color: '#89A54E'
}
            },
},
{
                title:{
                    rotation: 45,                                   //字型傾斜
text:'購買人數',
style: {
                        color: '#4572A7'
}
                },
labels: {
                    format: '{value} 人',
style: {
                        color: '#4572A7'
}
                },
opposite: true                                       //設定 兩條Y軸在位置不一樣 雙Y周 當然是true，但y周的 話可以不寫
}],
tooltip: { //提示框
formatter: function() {
                var s = '<span style="color:#034BA0">'+this.x +'</span>';
$.each(this.points, function(i, point) {
                    var valy = point.y;
var valuestr = valy;
s += '<br/><span style=\"'+"color:"+point.series.color+"\">"
+ point.series.name.split(' ')[0] +'</span>:<b>'
+ valuestr +'</b>';
});
return s;
},
shared: true,                                           //是否共用一個提示框
crosshairs: true
},
legend: {
            backgroundColor: '#FFFFFF'
},
series: series
    });
}
//我們在js中已經 封裝好了，我們來看看series的資料格式。
//series: [{                            //這比較重要  設定X軸顯示的柱狀圖資料的地方  也是一個數組
//                                      //可以看出這裡設定了兩個型別的柱
//    name:在,                          //橫座標
//    data: data.abnormalOil,            //資料
//    yAxis : 0,                           //對應的y周，預設0 對應 預設的y軸，如果多軸的話，按yAxis中y軸的的順序 從0遞增
//    dataLabels: {     //這個屬性可以在柱子上顯示的顯示數值為多少
//        enabled: true,
//        rotation: 0,
//        color: '#000000',
//        align: 'right',
//        x: 4,
//        y: 10,
//        style: {
//            fontSize: '13px',
//            fontFamily: 'Verdana, sans-serif',
//            textShadow: '0 0 3px black'
//        }
//    }

這個網址，有highChar的各種demo 也可以結合參考下哈