在Highchart dataLabels上访问另一个系列行的数据

时间:2019-10-07 16:17:43

标签: javascript graph highcharts

我要访问系列dataLabel中的另一个系列行数据。这是我的代码。

categoriesarr = [1,2,3,4,5];
noofloandisbursed = [10, 20, 30, 40, 50];
pdo = [9, 18, 27, 40, 49];

var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'disbursement'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: categoriesarr
            },
            tooltip: {
                pointFormat: '<b>{point.y}</b>'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 0,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#fff'),
                shadow: true
            },
            series: [{
                name: 'No. Of Loan Disbursed',
                type: 'column',
                data: noofloandisbursed
            },
            {
                name: 'Pre-Disbursement Orientation',
                type: 'column',
                data: pdo,
                dataLabels: {
                    enabled: true,
                    formatter: function(e) {
                        //return ((this.point.y/series[0].point.y)*100) + '%';
                    }
                }
            }]
        });

我想在dataLabels级联中显示(系列2值/系列1值)* 100的结果,仅在第二个系列中显示%。不幸的是,我无法访问序列1的y点值。当我尝试series[0].yData时,它返回整个数组,而不是与第二行匹配的特定行。我也尝试传递数组,但是没有用。需要解决这个问题。

1 个答案:

答案 0 :(得分:1)

您可以通过index从第一个系列中找到要点:

series: [{
        ...
    },
    {
        ...,
        dataLabels: {
            enabled: true,
            formatter: function(e) {
                return (
                    (this.point.y /
                        this.series.chart.series[0].points[this.point.index].y) *
                    100) + '%';
            }
        }
    }
]

实时演示: http://jsfiddle.net/BlackLabel/rdwxc382/

API参考: https://api.highcharts.com/highcharts/series.column.dataLabels.formatter