在海图图表上获取数字和百分比

Question

我正在做一个组合图。我一直坚持如何用2个值来表示行，无论是数量还是百分比。我不了解是由相同的Highcharts执行计算，还是必须添加一系列或附加数据才能表示的节点。公式应该是

  

100-（（已接电话* 100）/已接电话）

我不知道已经在哪里放置或发送带有该信息的数组，但是我如何呈现两个值，即值和百分比的放弃

Highcharts.chart('container', {
    title: {
        text: 'Inbound'
    },
    xAxis: {
        categories: ['January', 'Febraury', 'March', 'April', 'May', 'Jun']
    },
    labels: {

    },
    series: [{
        type: 'column',
        name: 'calls received',
        data: [7128,5067,5816,6005,6569,7260]
    }, {
        type: 'column',
        name: 'calls answered',
        data: [5664,4820,5456,5401,5846,5503]
    }, {
        type: 'column',
        name: 'calls abandoned',
        data: [1463,159,360,603,722,1757]
    }, {
        type: 'line',
        name: 'Abandon',
        data: [1463,159,360,603,722,1757],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        },
        tooltip: {
           pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
        },

    }, ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

您可以使用共享的工具提示和formatter函数：

tooltip: {
    formatter: function () {
        let s = '<b>' + this.x + '</b>';

        this.points.forEach(point =>  {
            s += '<br/>' + point.series.name + ': ' +
                (point.series.name === 'Abandon' ?
                    ((this.points[2].y * 100) / this.points[0].y).toFixed(2) + '%' :
                    point.y)
        });

        return s;
    },
    shared: true
}

Highcharts.chart('container', {
    title: {
        text: 'Inbound'
    },
    xAxis: {
        categories: ['January', 'Febraury', 'March', 'April', 'May', 'Jun']
    },
    labels: {

    },
    series: [{
        type: 'column',
        name: 'calls received',
        data: [7128,5067,5816,6005,6569,7260]
    }, {
        type: 'column',
        name: 'calls answered',
        data: [5664,4820,5456,5401,5846,5503]
    }, {
        type: 'column',
        name: 'calls abandoned',
        data: [1463,159,360,603,722,1757]
    }, {
        type: 'line',
        name: 'Abandon',
        data: [1463,159,360,603,722,1757],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        },

    }],
    tooltip: {
        formatter: function () {
            var s = '<b>' + this.x + '</b>';

            this.points.forEach(point =>  {
              s += '<br/>' + point.series.name + ': ' +
              
                (point.series.name === 'Abandon' ? 
                   ((this.points[2].y * 100) / this.points[0].y).toFixed(2) + '%' : 
                   point.y)
                
            });

            return s;
        },
        shared: true
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>