网上的例子，数据都是写死的，有点不实用吧
我在这里举一个，展示功能需求的数据。按需从数据库获取并画图展示 (本例子结合 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>
要有个div来接收画图的效果 通过id标识
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'
// }
// }
https://www.hcharts.cn/demo/highcharts/dynamic-update/dark-unica
这个网址，有highChar的各种demo 也可以结合参考下哈
