在ASP.NET中用Google Charts API JS将条形图标签显示为绝对值

我有一个堆叠条形图，为了正确绘制图表使用了负值，但真实值并非负数。忽略灰色条形标签的位置错误，如何将图表视图和鼠标悬停显示的-676改为绝对值676？以下是使用的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.listAllAircraftChartQuarterly))

        var title = 'Quarterly Aircraft Transaction Trend';

        data.addColumn('string', 'Quarter');
        data.addColumn('number', '2023');
        data.addColumn('number', '2022');
        data.addColumn('number', '% Change');
        data.addRows(jsonList.map((p) => {
            return [p.yearQuarter, p.year2top, p.year3bottom, p.year2percent];
        }));

        var formatPercent = new google.visualization.NumberFormat({ pattern: '#.#%' });
        formatPercent.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',
                    title: "",
                    viewWindow: { min: -1100, max: 1100 },
                    gridlines: { color: 'lightgray' },
                },
                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: {
                highContrast: false,
                textStyle: {
                    color: 'red',
                    fontSize: 12,
                    bold: true
                },
                alwaysOutside: true
            },
        }

        var chart = new google.visualization.ComboChart(document.getElementById('primaryYear2and3'));
        chart.draw(view, options);

        document.getElementById('downloadimg2and3').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>

我已查阅过关于绝对值和Math.abs()用法的相关帖子。

要保留负值用于堆叠绘图，仅修改显示层的数值为绝对值，需从**标签（annotation）和鼠标悬停提示（tooltip）**两部分调整：

1. 修改灰色条形的标签显示 #

在DataView的列定义中，把灰色系列（第2列，2022数据）的calc函数从直接stringify改为计算绝对值后转字符串：

{
    calc: function(dataTable, rowIndex) {
        return Math.abs(dataTable.getValue(rowIndex, 2)).toString();
    },
    sourceColumn: 2,
    type: "string",
    role: "annotation"
}

2. 修改鼠标悬停提示的显示 #

同样在DataView中，为灰色系列添加自定义tooltip角色，返回带绝对值的提示文本：

{
    calc: function(dataTable, rowIndex) {
        return '2022: ' + Math.abs(dataTable.getValue(rowIndex, 2));
    },
    sourceColumn: 2,
    type: "string",
    role: "tooltip"
}

完整修改后的DataView代码 #

替换原有的view.setColumns部分：

var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
    {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    },
    2,
    // 修改灰色条形的标签为绝对值
    {
        calc: function(dataTable, rowIndex) {
            return Math.abs(dataTable.getValue(rowIndex, 2)).toString();
        },
        sourceColumn: 2,
        type: "string",
        role: "annotation"
    },
    // 添加自定义tooltip，显示绝对值
    {
        calc: function(dataTable, rowIndex) {
            return '2022: ' + Math.abs(dataTable.getValue(rowIndex, 2));
        },
        sourceColumn: 2,
        type: "string",
        role: "tooltip"
    },
    3,
    {
        calc: "stringify",
        sourceColumn: 3,
        type: "string",
        role: "annotation"
    }
]);

说明 #

• 数据本身的负值保留，不影响堆叠条形图的绘制逻辑；
• 仅在显示层（标签和tooltip）使用Math.abs()转换为绝对值；
• 蓝色条形（2023数据）和百分比折线的显示不受影响，保持原有逻辑。

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