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

时间:2021-06-23 11:38:24

标签: charts google-visualization

我的图表上的条形图上显示了一个格式化标签。 该值也会在工具提示中格式化。有没有办法在工具提示上显示未格式化的原始值,同时在标签上保持格式化?

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

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

1 个答案:

答案 0 :(得分:2)

仅格式化注释值。

要完成,请为注释角色使用自定义函数,而不是 '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>