计算高图表中的百分比和格式
Calculating percentage and formatting in highcharts
我在这里为向下钻取的高图表创建了一个小提琴https://jsfiddle.net/osnnneaj/2/
。我也需要在主图表和明细图表中使用正确的百分比格式化工具提示。有人可以告诉我该怎么做。
所以我需要工具提示显示总数的 5%。
$(function () {
$('#drillDown').highcharts({
chart: {
type: 'column',
renderTo: 'drillDown'
},
title: {
text: 'Healthcare Operations'
},
subtitle: {
text: 'Facility Revenue'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: ${point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:
'<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Facility',
colorByPoint: true,
data: [{
name: 'Tanner Hospital System',
y: 1000000,
drilldown: 'Tanner Hospital System'
}, {
name: 'Wellstar Health',
y: 2500000,
drilldown: 'Wellstar Health'
}, {
name: 'Jacobs Medical Park',
y: 370000,
drilldown: 'Jacobs Medical Park'
}, {
name: 'Blue Star',
y: 4200000,
drilldown: 'Blue Star'
}, {
name: 'Cigna',
y: 2700000,
drilldown: 'Cigna'
}, {
name: 'Blue Cross',
y: 3900000,
drilldown: 'Blue Cross'
}]
}],
drilldown: {
series: [{
name: 'Tanner Hospital System',
id: 'Tanner Hospital System',
data: [
{
name: 'Intensive Care',
y: 500000,
drilldown: 'Tanner Intensive Care Sub'
},
['Orthopaedics', 300000],
['Pediatrics', 200000],
['Internal Medicine', 100000],
['Cancer Unit', 100000]
]
}, {
name: 'Wellstar Health',
id: 'Wellstar Health',
data: [
['Intensive Care', 100000],
['Orthopaedics', 100000],
['Pediatrics', 50000],
['Internal Medicine', 25000],
['Cancer Unit', 25000]
]
}, {
name: 'Jacobs Medical Park',
id: 'Jacobs Medical Park',
data: [
['Intensive Care', 20000],
['Orthopaedics', 10000],
['Pediatrics', 4000],
['Internal Medicine', 1500],
['Cancer Unit', 1500]
]
}, {
name: 'Blue Star',
id: 'Blue Star',
data: [
{
name: 'Intensive Care',
y: 500000,
drilldown: 'Blue Star Intensive Care Sub'
},
{
name: 'Orthopaedics',
y: 10000000,
drilldown: 'Blue Star Orthopaedics'
},
['Pediatrics', 1000000],
['Internal Medicine', 500000],
['Cancer Unit', 500000]
]
}, {
name: 'Cigna',
id: 'Cigna',
data: [
['Intensive Care', 3000000],
['Orthopaedics', 8000000],
['Pediatrics', 1000000],
['Internal Medicine', 500000],
['Cancer Unit', 500000]
]
},
{
name: 'Blue Cross',
id: 'Blue Cross',
data: [
['Intensive Care', 3000000],
['Orthopaedics', 8000000],
['Pediatrics', 1000000],
['Internal Medicine', 500000],
['Cancer Unit', 500000]
]
},
{
id: 'Tanner Intensive Care Sub',
data: [
['First Ward', 3000000],
['ICU 2', 8000000],
['ICU 3', 1000000],
['ICU 4', 500000],
['ICU 5', 500000]
]
},
{
id: 'Blue Star Intensive Care Sub',
data: [
['First Ward', 3000000],
['ICU 2', 8000000],
['ICU 3', 1000000],
['ICU 4', 500000],
['ICU 5', 500000]
]
},
{
id: 'Blue Star Orthopaedics',
data: [
['First Ward', 3000000],
['ICU 2', 8000000],
['ICU 3', 1000000],
['ICU 4', 500000],
['ICU 5', 500000]
]
}
]
}
});
});
谢谢
假设 jsfiddle 中的数据总计是图表上所有柱线的总和:
tooltip: {
formatter: function() {
var pcnt = (this.y / 37170000) * 100;
return this.x + ' ' + Highcharts.numberFormat(pcnt) + '%';
}
},
series: [{
相关文章:
- 如何使用javascript或html下载PDF格式的填写表单
- 货币代码为欧元-金额的格式不应包含小数
- Json数据包含日期和时间格式
- Javascript日期格式类似于ISO,但本地
- 更改angularjs中的日期-时间格式
- 将日期时间从json转换为可读格式
- NodeJS日期格式不起作用
- 我能得到正确的格式吗
- PHP:显示sqlite数据库中的html格式数据,使用tinymce保存
- 使用正则表达式将输入格式设置为单字符逗号、单字符逗号等
- 将日期和时间转换为UTC格式的日期-Javascript
- Javascript格式UTC日期
- 元素的内容必须由格式正确的字符数据或标记组成
- 计算高图表中的百分比和格式
- 设置谷歌折线图工具提示数据的格式以使用百分比
- 百分比格式的国际化
- Highcharts:工具提示点格式为十进制到百分比
- Morris js以百分比格式显示值
- 如何防止“URIError:格式错误的 URI 序列”从样式百分比
- 格式剑道网格列过滤器的百分比