Google图表在工具提示中显示未格式化的值。

Question

我在图表上的条形上显示了一个格式化标签。此值也会在工具提示中进行格式化。是否有一种方法在工具提示上显示未格式化的原始值，同时在标签上对其进行格式化？

https://jsfiddle.net/67u052kL/1/

    var formatter = new google.visualization.NumberFormat({
        pattern: 'short'
    });
    
    formatter.format(data, 1);
    formatter.format(data, 3);

Answer 1

只格式化注释值。

要完成这一任务，请使用自定义函数作为注释角色，而不是使用'stringify'函数。

您可以使用格式化程序的formatValue方法来格式化单个值。

view.setColumns([0, 1, {
    calc: function (dt, row) {
        return formatter.formatValue(dt.getValue(row, 1));
    },
    type: 'string',
    role: 'annotation'
}, 2, 3, {
    calc: function (dt, row) {
        return formatter.formatValue(dt.getValue(row, 3));
    },
    type: 'string',
    role: 'annotation'
}]);

看下面的工作片段..。

​

google.charts.load('50', {
  packages: ['corechart']
}).then(function () {
    var data = google.visualization.arrayToDataTable([
        ['Team'   , 'Actual',  { role: 'style'}, 'Target'],
        ['Alpha'  ,    35976,  'color: #F6931D',    90000],
        ['Beta'   ,    40542,  'color: #FDCB2F',   104167],
        ['Gamma'  ,   111227,  'color: #8AC659',   205000],
        ['Delta'  ,   238356,  'color: #32A242',   205000],
        ['Epsilon',   170555,  'color: #3A81C2',   354167]
    ]);

    var formatter = new google.visualization.NumberFormat({
        pattern: 'short'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: function (dt, row) {
            return formatter.formatValue(dt.getValue(row, 1));
        },
        type: 'string',
        role: 'annotation'
    }, 2, 3, {
        calc: function (dt, row) {
            return formatter.formatValue(dt.getValue(row, 3));
        },
        type: 'string',
        role: 'annotation'
    }]);

    var options = {
        title: {position: 'none'},
        orientation: 'vertical',
        animation: {duration : 600, startup: 'true', easing:'out'},
        annotations: {highContrast: 'true'},
        legend: {position: 'none'},
        // theme: 'material',
        chartArea:{top:5, right: 25, width: '70%', height: '90%'},
        hAxis: {format:'short'},
        // vAxis: {textPosition:'in'},
        // bar: {groupWidth: '90%'},
        seriesType: 'bars',
        series: {
            1: {type: 'bars', color: 'lightgray'}
        }
    };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartContentPane"></div>

​