我的图表由主垂直轴上的 2 个堆叠条形图和辅助轴上的一条线组成。我的辅助 vAxis 格式为 % 并按我想要的方式显示,但是,各个数据点显示为十进制值,即 -0.446,而我想要的是 -44.6%。
JavaScript 代码
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
var jsonList = @(Json.Serialize(Model.listAllAircraftChart))
var title = 'Monthly Aircraft Transaction Trend';
data.addColumn('string', 'Month');
data.addColumn('number', '2024');
data.addColumn('number', '2023');
data.addColumn('number', '% Change');
data.addRows(jsonList.map((p) => {
return [p.yearMonth, p.year1top, p.year2bottom, p.year1percent];
}));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3,
{
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}
]);
var options = {
title: title,
titlePosition: 'out',
isStacked: true,
seriesType: "bars",
vAxes: {
0: {
textPosition: 'out',
viewWindowMode: 'pretty',
viewWindow: { min: -750, max: 750 },
gridlines: { color: 'light-gray' },
},
1: {
textPosition: 'out',
viewWindow: { min: -1, max: 1 },
format: 'percent',
gridlines: { color: 'transparent' }
},
},
series: {
0: { targetAxisIndex: 0, color: 'blue'},
1: { targetAxisIndex: 0, color: 'gray' },
2: { targetAxisIndex: 1, color: 'red', type: 'line', lineWidth: 1, lineDashStyle: [4, 4], pointSize: 5 },
},
width: '100%',
height: '300',
legend: { position: 'top' },
chartArea: {
height: '100%',
width: '100%',
top: 48,
left: 60,
right: 60,
bottom: 75
},
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
},
}
var chart = new google.visualization.ComboChart(document.getElementById('primaryCurrentYear'));
chart.draw(view, options);
document.getElementById('downloadimg').innerHTML = '<a download="google-chart-image" href="' + chart.getImageURI() +
'"><button type="button" class="btn btn-outline-dark btn-sm opacity-25 ms-4 mb-3">Download Chart Image</button></a>';
window.addEventListener('resize', drawChart, false);
}
</script>
我尝试过研究类似的图表并查看了 Google Charts API 文档,但我一直无法弄清楚。
您可以使用 Google Charts 的 NumberFormat 类...
在这里,我们向格式化程序提供一个数字模式:
#,##0.0%
var formatter = new google.visualization.NumberFormat({
pattern: '#,##0.0%'
});
创建数字格式化程序后,您可以使用
format
方法来格式化整个数据表列。
formatter.format(data, 3); // <-- format % Change column
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
//var jsonList = @(Json.Serialize(Model.listAllAircraftChart))
var jsonList = [
{yearMonth: 'January', year1top: 141, year2bottom: -158, year1percent: -0.108},
{yearMonth: 'February', year1top: 98, year2bottom: -77, year1percent: -0.446},
{yearMonth: 'March', year1top: 0, year2bottom: -299, year1percent: -1},
{yearMonth: 'April', year1top: 0, year2bottom: -219, year1percent: -1},
{yearMonth: 'May', year1top: 0, year2bottom: -272, year1percent: -1}
];
var title = 'Monthly Aircraft Transaction Trend';
data.addColumn('string', 'Month');
data.addColumn('number', '2024');
data.addColumn('number', '2023');
data.addColumn('number', '% Change');
data.addRows(jsonList.map((p) => {
return [p.yearMonth, p.year1top, p.year2bottom, p.year1percent];
}));
// format % Change column
var formatter = new google.visualization.NumberFormat({
pattern: '#,##0.0%'
});
formatter.format(data, 3);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3,
{
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}
]);
var options = {
title: title,
titlePosition: 'out',
isStacked: true,
seriesType: "bars",
vAxes: {
0: {
textPosition: 'out',
viewWindowMode: 'pretty',
viewWindow: { min: -750, max: 750 },
gridlines: { color: 'light-gray' },
},
1: {
textPosition: 'out',
viewWindow: { min: -1, max: 1 },
format: 'percent',
gridlines: { color: 'transparent' }
},
},
series: {
0: { targetAxisIndex: 0, color: 'blue'},
1: { targetAxisIndex: 0, color: 'gray' },
2: { targetAxisIndex: 1, color: 'red', type: 'line', lineWidth: 1, lineDashStyle: [4, 4], pointSize: 5 },
},
width: '100%',
height: '300',
legend: { position: 'top' },
chartArea: {
height: '100%',
width: '100%',
top: 48,
left: 60,
right: 60,
bottom: 75
},
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
},
}
var chart = new google.visualization.ComboChart(document.getElementById('primaryCurrentYear'));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById('downloading').innerHTML = '<a download="google-chart-image" href="' + chart.getImageURI() +
'"><button type="button" class="btn btn-outline-dark btn-sm opacity-25 ms-4 mb-3">Download Chart Image</button></a>';
});
chart.draw(view, options);
window.addEventListener('resize', drawChart, false);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="primaryCurrentYear"></div>
<div id="downloading"></div>
注意:
getImageURI
仅在图表的 'ready'
事件触发后才可用...