Highcharts 的基本使用 双y轴 以及数据的匹配问题

为什么80%的码农都做不了架构师？>>>   

这就是我做出来的效果  以一个柱状图为例子 其他的图像 差不了多少  双y轴

//这就是js代码  在对应的jsp 文件中需要先引入相应的 Highcharts   js文件       
$('#Dscore_oilabnormal').highcharts({ 
                chart: {
                    type: 'column'//这里的类型表示 柱状图
                },
                exporting:{  //这里配置图表的导出功能为false 没有配置的时候 图表的的右上方会有一个导出的按钮
                    enabled:false
                },
                credits : { //这里配置的是取消右下角  Highcharts版权连接 请允许我这么说
                    enabled : false
                },
                colors: [    //这里配置的是柱状图上那几根柱子应该是什么颜色的
                         '#CC3300', 
                         '#666FF'
                      ],
                title: {    //这里是图表标题
                    text: $.getBusinessField("sorceAbnormalOil", "HP010")
                },
                xAxis: {   //X轴
                     categories:data.time //X轴数据
                },
                yAxis: [{  //这里注意了  配置双Y轴的这里要看好了  这里的值是一个数组
                    min: 0,
                    title:{  //左边y轴的标题
                        text :''
                    },
                    labels:{
                        formatter:function() {//在labels里可以配置formatter属性可以对y轴设置单位之类的个性化东西
                            return this.value+"L";//可以对照上面图表
                        }
                    }
                },{
                    title:{  //这是第二天Y轴在右边
                        text :''
                    },
                    opposite:true//这个属性的作用是说 是否与第一条y轴相反 当然是true咯
                }], 
                labels: { 
                    rotation: -90,
                    align: 'right',
                    style: { 
                        fontSize: '13px', 
                        fontFamily: 'Verdana, sans-serif' } 
                },
                series: [{  //这比较重要  设置X轴显示的柱状图数据的地方  也是一个数组 
                            //可以看出这里设置了两个类型的柱
                    name:$.getBusinessField("totaloilabnormal", "HP010"),
                    data: data.abnormalOil, //这就是一种类型的柱状的数据  以此类推
                    yAxis : 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'
                        }
                    }

                }, {
                    name: $.getBusinessField("averagescore", "HP010"),
                    data: data.driverScore,
                    yAxis : 1,
                    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'
                        }
                    }
                }]
            });

数据根据自己的业务来处理 我的做法是后台返回一个map  map里面放了 几个数据集合  每个数据集合分别对应相应的X轴数据
和图表柱状数据

转载于:https://my.oschina.net/pingdy/blog/201464