在Highchart的图表上获取数字和百分比
在Highchart的图表上获取数字和百分比
提问于 2018-07-18 05:59:39
我正在做一个组合图。我被困在如何用两个值来表示这条线，无论是数字还是百分比。我不明白是相同的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>
回答 1
Stack Overflow用户
发布于 2018-07-18 06:51:35
您可以使用共享工具提示和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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51390777
复制相关文章
相似问题