javascript - Highcharts 值(value)百分比

标签 javascript arrays highcharts

我正在尝试使用高级图表 API 重新创建此图表。有什么想法如何构建这个吗?尝试使用数字和百分比列对年份类别进行分组,请参阅随附的示例图片。谢谢!

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]


        }]



    });

最佳答案

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

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

example on jsfiddle

关于javascript - Highcharts 值(value)百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41883865/

相关文章:

c - 将数组的每个元素乘以C中的数字

javascript - 修改字符串数组,使其用作定位中的 ID

Javascript Highcharts : series datalabel formatter function to loop data not formatting all data form the array

javascript - React.js HTML 中的选项卡式组件包括

javascript - 谷歌地图导致其他元素溢出正文

java - 如何在 ZigZag 路径中​​遍历和打印二维数组

javascript - 无法在 Highcharts 图表中设置时区

javascript - 我们如何检测 Riot.js 中循环/渲染的结束?

javascript - 如何在另一个对象方法中引用一个对象方法

javascript - Highcharts 内部边界曲线