Highcharts百分比与价值

时间:2017-01-26 22:08:42

标签: javascript arrays highcharts

我正在尝试使用高图表api重新创建此图表。任何想法如何建立这个?尝试使用数字和百分比列对年份类别进行分组,请参阅附加的示例pic。谢谢!

1

到目前为止,我已尝试过此功能,但无法同时获得附加图片的值和百分比:

  Highcharts.chart('ContainerMonthToDate', {
        chart: {
            type: 'column'
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        xAxis: {
            categories: [
                'Jan 2017',
                'Jan 2016'

            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '# Patients'
            }
        },


        labels: {
            formatter: function(){
                return 100*this.value / $(this.axis.tickPositions).last()[0] + '%';
            }

    },


        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    crop: false,
                    overflow: 'none'
                }
            }
        },


        colors: [
           '#ff0000',
           '#ff0000',
           '#ff0000',
           '#ff0000'
        ],

        series: [{
            name: 'Cumulative',
            data: [8657, 7824]

        }, {
            name: 'Admissions',
            data: [2025, 1898]

        }, {
            name: 'Budgeted',
            data: [8018, 7913]

        }, {
            showInLegend: false,
            name: '',
            data: [1956, 1889]


        }]



    });

1 个答案:

答案 0 :(得分:0)

要组合两种类型的数据,请使用yAxis的此定义:

    yAxis: [{
        title: {
            text: '# Pts'
        }
    }, {
        opposite: true,
        max: 100,
        title: {
            text: '% Pts'
        },
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        }
    }],

example on jsfiddle