在双轴高图表中将 y 轴值转换为百万
Convert the y-axis values to Millions in dual axis high charts
我正在使用双轴高位图。在 y 轴中,值太大而无法读取。我想将它们转换为快捷方式,例如 1K 表示 1000,1.0L 表示 100000,1.0M 表示 1000000,35.8M 表示 35869982,3.5M 表示 3550977。
这是我的FIDDLE
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['MAR-2014', 'APR-2014', 'MAY-2014', 'JUN-2014',
'JUL-2014', 'AUG-2014', 'SEP-2014', 'OCT-2014', 'NOV-2014', 'DEC-2014'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'VOLUME',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REVENUE',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Revenue',
type: 'column',
yAxis: 1,
data: [35869982, 26090976, 26595718, 33914250, 25999278, 36579864, 35843674, 28008920, 27718356, 29014230],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'volume',
type: 'spline',
data: [3379865, 2373769, 2401815, 3222316, 2459713, 5864469, 5139453, 3341922, 3229963, 3550977],
tooltip: {
valueSuffix: ''
}
}]
});
});
这里我把我要修改的地方汇总了下图
您需要使用格式化程序:
formatter: function(){
return this.value/1000000 + "M";
}
要利用内置的 "shortening" 功能,您只需删除 yAxis.label.format
。您目前已将其设置为 {value}
,这是默认设置,但手动设置似乎会阻止应用度量标准前缀。
查看 this JSFiddle example,我所做的所有更改是从您的两个 y 轴标签中删除以下行:
format: '{value}'
通过这种自动缩短,可以应用以下 metric prefixes:
[ "k" , "M" , "G" , "T" , "P" , "E"]
您可以使用 lang.numericSymbols
选项 (API) 设置您自己的值。
我正在使用双轴高位图。在 y 轴中,值太大而无法读取。我想将它们转换为快捷方式,例如 1K 表示 1000,1.0L 表示 100000,1.0M 表示 1000000,35.8M 表示 35869982,3.5M 表示 3550977。
这是我的FIDDLE
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['MAR-2014', 'APR-2014', 'MAY-2014', 'JUN-2014',
'JUL-2014', 'AUG-2014', 'SEP-2014', 'OCT-2014', 'NOV-2014', 'DEC-2014'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'VOLUME',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REVENUE',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Revenue',
type: 'column',
yAxis: 1,
data: [35869982, 26090976, 26595718, 33914250, 25999278, 36579864, 35843674, 28008920, 27718356, 29014230],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'volume',
type: 'spline',
data: [3379865, 2373769, 2401815, 3222316, 2459713, 5864469, 5139453, 3341922, 3229963, 3550977],
tooltip: {
valueSuffix: ''
}
}]
});
});
这里我把我要修改的地方汇总了下图
您需要使用格式化程序:
formatter: function(){
return this.value/1000000 + "M";
}
要利用内置的 "shortening" 功能,您只需删除 yAxis.label.format
。您目前已将其设置为 {value}
,这是默认设置,但手动设置似乎会阻止应用度量标准前缀。
查看 this JSFiddle example,我所做的所有更改是从您的两个 y 轴标签中删除以下行:
format: '{value}'
通过这种自动缩短,可以应用以下 metric prefixes:
[ "k" , "M" , "G" , "T" , "P" , "E"]
您可以使用 lang.numericSymbols
选项 (API) 设置您自己的值。