Highchart y轴需要2个类别,每个类别有3个子类别

时间:2017-03-17 06:46:31

标签: node.js highcharts

我正在使用高图表版本v4.0.4,我已经工作了如下所述的条形图我需要输出与每年的条形图每年给出的详细信息 我正在制作下面的高图表代码

var data_first_vd = 0;
var data_second_vd = 0;
var glb_data_ary = [];
var dynamicval1 = 5.85572581;
var dynamicval2 = 0.16091656;
if((dynamicval1>1) || (dynamicval2>1)){
    var data_tit = 'Value';
    var data_val = '${value}';
    var prdelvalaxis = 1000000;
}else{
    prdelvalaxis = 1000;
    data_tit = "Value";
    data_val = "${value}";
}
data_first_vd=5.86;
data_second_vd =0.16;
var data_first_ud =1397.128;
var data_second_ud = 28.145;

data_first_ud_lbl = '1.40M';
data_second_ud_lbl = '28K';
data_first_vd_lbl = '5.86M';
data_second_vd_lbl = '161K';
data_first_vd_lbl_xaxis = '$5.86M';
data_second_vd_lbl_xaxis = '$161K';
var ud1 = 1397;
var ud2 = 28;
var vd1 = 6;
var vd2 = 0;


$('#id').highcharts({
    credits: { enabled: false },
    chart: {
        type: 'bar',
        height: 200,
        marginLeft: 120,
        marginBottom:50,
        marginTop: 47,
        marginRight:30,
        plotBorderWidth: 0,
    },
    title: {
        text: null
    },
    xAxis: {
        drawHorizontalBorders: false,

        labels: {
            groupedOptions: [{

                rotation: 270,

            }],
            rotation: 0, 
            align:'center',
            x: -30,
            y: 5,
            formatter: function () { 
                if (curYear === this.value) {
                    return '<span style="color:#6C9CCC;">' + this.value + '</span>';
                } 
                else if (prevYear === this.value) {
                    return '<span style="color: #ED7D31;">' + this.value + '</span>';
                }
                else if ('VALUE' === this.value) {
                    return '<span style="color:#942EE1;">' + this.value + '</span>';
                }
                else{
                    return '<span style="color: #E124D2;">' + this.value + '</span>';
                }
            },
            useHTML:true
        },
        categories: [{
            name: "UNITS",

            categories: [2017, 2016]
        },{
            name: "VALUE",

            categories: [2017, 2016]
        }
     ],

    },
    yAxis: [{ // Primary yAxis
        labels: {
            format: data_val,               
            formatter: function () { 
                if(this.value!=0){ 
                    return '$'+valueConverter_crt(this.value*prdelvalaxis);                     
                }else{ 
                    return this.value;
                }
            },
            style: {

                color: '#942EE1'
            }
        },
        title: {
            text: "<span style='font-size: 12px;'>"+data_tit+"</span>",
            style: {

                color: '#942EE1'
            },
            useHTML:true
        }
    }, { // Secondary yAxis
        title: {
            text: "<span style='font-size: 12px;'>Units</span>",
            style: {

                 color: '#E124D2'
            },
            useHTML:true
        },
        labels: {
            format: '{value}',
            formatter: function () {
                if(this.value!=0){ 
                    return cal_pro_del_xaxis(this.value);
                }else{ 
                    return this.value;
                }
            },
            style: {
                 color: '#E124D2'
            }
        },
        opposite: true
    }],
    tooltip: { enabled: false },
    exporting: { enabled: false },
    legend: { enabled: false },
    plotOptions: {
        series: {
            dataLabels: {
                inside: true,
                align: 'left',
                enabled: true,
                formatter: function () {
                    return this.point.name;

                },
                color: '#000000',

            },
            stacking: false,
            pointWidth: 15,
            groupPadding: 0.5               
        },
    },
    series: [{
        yAxis: 1,
        data: [{y:1397.128,name:data_first_ud_lbl,color:'#6C9CCC'},{y:28.145,name:data_second_ud_lbl,color:'#ED7D31'}],
    }, {            
        data: [null,null,{y:5.86,name:data_first_vd_lbl_xaxis,color:'#6C9CCC'},{y:0.16,name:data_second_vd_lbl_xaxis,color:'#ED7D31'}],
    }]
});

existing chart

我需要像下面的图表一样把这个图表画在画中。 Expected Chart每年增加3个酒吧 请帮我实现这个目标

0 个答案:

没有答案