ASP.NET项目中Google Chart API设置次坐标轴数据点为百分比

我的图表主纵轴包含2个堆叠柱状图，次纵轴为折线图。目前次纵轴已设置为百分比格式且显示正常，但单个数据点的注释仍显示为小数（如-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>

解决方法 #

问题出在折线图数据点的注释配置上：当前使用calc: "stringify"会直接将原始小数数值转为字符串，不会应用次纵轴的百分比格式。需要自定义计算函数来格式化数值：

修改DataView中对应% Change的注释配置，替换原有的calc: "stringify"为自定义函数：

{
  calc: function(dataTable, rowIndex) {
    // 获取原始百分比数值（如-0.446）
    var value = dataTable.getValue(rowIndex, 3);
    // 转为百分比格式并保留1位小数
    return (value * 100).toFixed(1) + '%';
  },
  sourceColumn: 3,
  type: "string",
  role: "annotation"
}

修改后的完整DataView代码：

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: function(dataTable, rowIndex) {
            var value = dataTable.getValue(rowIndex, 3);
            return (value * 100).toFixed(1) + '%';
        },
        sourceColumn: 3,
        type: "string",
        role: "annotation"
    }
]);

这样修改后，折线图的数据点注释就会显示为-44.6%这类百分比格式，和次纵轴的显示保持一致。

内容的提问来源于stack exchange，提问作者confusedUser1