网上的例子,数据都是写死的,有点不实用吧
我在这里举一个,展示功能需求的数据。按需从数据库获取并画图展示 (本例子结合 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 也可以结合参考下哈