在谷歌图表蜡烛中以短格式显示总数答案

【问题标题】：Show total in short format in google chart candle在谷歌图表蜡烛中以短格式显示总数
【发布时间】：2019-02-19 13:46:14
【问题描述】：

我想在谷歌图表中以短格式显示数字。
前任。 1,300,000 是“1.3M”
这是sn-p...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(unCoveredProducts);
function unCoveredProducts() {
    var data = google.visualization.arrayToDataTable([
        ['Element', '', { role: 'style' }],
        ['> 60 Days', 1300000, '#005073'],
        ['45 - 60 Days', 850000, '#006b96'],
        ['30 - 45 Days', 500000, '#017CAD'],
        ['15 - 30 Days', 300000, 'color: #00b1dd'],
        ['< 15 Days', 100000, 'color: #00bceb'],
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: 'stringify',
            sourceColumn: 1,
            type: 'string',
            role: 'annotation'
        },
        2]);

    var options = {
        width: 345,
        height: 280,
        'chartArea': { 'width': '70%', 'height': '100%' },
        bar: { groupWidth: '80%' },
        legend: { position: 'none' },
        hAxis: { textPosition: 'none' },
        vAxis: { format: 'sort' }
    };

    var chart = new google.visualization.BarChart(
    document.getElementById('unCoveredProducts'));

    chart.draw(view, options);
}

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

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

使用NumberFormat 类...

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

请参阅以下工作 sn-p...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(unCoveredProducts);
function unCoveredProducts() {
    var data = google.visualization.arrayToDataTable([
        ['Element', '', { role: 'style' }],
        ['> 60 Days', 1300000, '#005073'],
        ['45 - 60 Days', 850000, '#006b96'],
        ['30 - 45 Days', 500000, '#017CAD'],
        ['15 - 30 Days', 300000, 'color: #00b1dd'],
        ['< 15 Days', 100000, 'color: #00bceb'],
    ]);

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

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: 'stringify',
            sourceColumn: 1,
            type: 'string',
            role: 'annotation'
        },
        2]);

    var options = {
        width: 345,
        height: 280,
        'chartArea': { 'width': '70%', 'height': '100%' },
        bar: { groupWidth: '80%' },
        legend: { position: 'none' },
        hAxis: { textPosition: 'none' },
        vAxis: { format: 'sort' }
    };

    var chart = new google.visualization.BarChart(
    document.getElementById('unCoveredProducts'));

    chart.draw(view, options);
}

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

【讨论】：