HighChar 详解-双Y轴-及各

    网上的例子，数据都是写死的，有点不实用吧

我在这里举一个，展示功能需求的数据。按需从数据库获取并画图展示  (本例子结合 angular.js，其他前台框架同理 从后台获取数据即可)

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

如果结合前台框架使用的话 ，比如 angular.js vue.js 这些前台框架，要注意引入顺序，highChar.js的引入必须在他们后面

（等等会附上我的代码链接）

2.然后开始解析画图对应的 js代码  

  a. 首先是html或者jsp页面的代码 如下

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

  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 = ''+this.x +'';
                $.each(this.points, function(i, point) {var valy = point.y;
                    var valuestr = valy;
                    s += '
\"'+"color:"+point.series.color+"\">"
                        + point.series.name.split(' ')[0] +':'
                        + valuestr +'';
                });
                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 也可以结合参考下哈

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！