Показывать итоги в коротком формате в гугл чарте - PullRequest
Новая
       8

Показывать итоги в коротком формате в гугл чарте

0 голосов
/ 19 февраля 2019

Я хочу показывать числа в коротком формате на Google-карте.
Пример.1 300 000 - это 1,3 млн.
Вот фрагмент ... 

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>

1 Ответ

0 голосов
/ 19 февраля 2019

используйте NumberFormat класс ... 

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

см. Следующий рабочий фрагмент ... 

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>
...