numbers - 谷歌图表 - 格式编号

Question

相同的代码 http://jsbin.com/EFayoCI/1

旧图表 我想要这样的数字格式

Answer 1

Visualization API 的格式化程序无法将数字转换为速记指标(例如，“5000”转换为“5k”)。如果你想要那种效果，你有两种选择:

1. 指定 vAxis.ticks 选项为每个轴值创建自定义标签

   vAxis: {
       ticks: [{v: 1500000, f: '1500k'}, {v: 1570000, f: '1570k'}, {v: 1640000, f: '1640k'}, {v: 1710000, f: '1710k'}, {v: 1780000, f: '1780k'}]
   }
   

2. 使用 DataView 减小传递给图表的数据大小

   var view = new google.visualization.DataView(data);
   view.setColumns([0, {
       type: 'number',
       label: data.getColumnLabel(1),
       calc: function (dt, row) {
           return {v: dt.getValue(row, 1) / 1000, f: dt.getFormattedValue(row, 1)};
       }
   }]);
   chart.draw(view, {
       vAxis: {
           format: '#k'
       }
   });
   

[编辑:这是一个完整的示例图表，它根据需要以 B、KB、MB、GB 格式设置轴和数据]

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'File Name');
    data.addColumn('number', 'File Size');
    data.addRows([
        ['foo.exe', 45000000],
        ['bar.zip', 600000000],
        ['baz.iso', 1700000000]
    ]);

    // custom format data values
    for (var i = 0; i < data.getNumberOfRows(); i++) {
            val = cli.getVAxisValue(bb.top);
            // sometimes, the axis value falls 1/2 way though the pixel height of the gridline,
            // so we need to add in 1/2 the height
            // this assumes that all axis values will be integers
            if (val != parseInt(val)) {
                val = cli.getVAxisValue(bb.top + bb.height / 2);
            }

            // convert from base-10 counting to 2^10 counting
            for (var n = 0; val >= 1000; n++) {
                val /= 1000;
            }
            formattedVal = val;
            val *= Math.pow(1024, n);

            switch (n) {
                case 0:
                    suffix = 'B';
                    break;
                case 1:
                    suffix = 'KB';
                    break;
                case 2:
                    suffix = 'MB';
                    break;
                case 3:
                    suffix = 'GB';
                    break;
                default:
                    // format to GB
                    while (n > 3) {
                        formattedVal *= 1024;
                        n--;
                    }
                    suffix = 'GB'
            }

            ticks.push({v: val, f: formattedVal + suffix});
    }

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var options = {
        height: 400,
        width: 600
    };

    // get the axis values and reformat them
    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
        google.visualization.events.removeListener(runOnce);
        var bb, val, suffix, ticks = [], cli = chart.getChartLayoutInterface();
        for (var i = 0; bb = cli.getBoundingBox('vAxis#0#gridline#' + i); i++) {
            val = cli.getVAxisValue(bb.top);
            // sometimes, the axis value falls 1/2 way though the pixel height of the gridline,
            // so we need to add in 1/2 the height
            // this assumes that all axis values will be integers
            if (val != parseInt(val)) {
                val = cli.getVAxisValue(bb.top + bb.height / 2);
            }
            // using 1000 here to keep the axis neat
            // this messes a bit with the scale of the chart, so you might want to change it
            for (var n = 0, formattedVal = val; formattedVal >= 1000; n++) {
                formattedVal /= 1000;
            }
            switch (n) {
                case 0:
                    suffix = 'B';
                    break;
                case 1:
                    suffix = 'KB';
                    break;
                case 2:
                    suffix = 'MB';
                    break;
                case 3:
                    suffix = 'GB';
                    break;
                default:
                    // format to GB
                    while (n > 3) {
                        formattedVal *= 1000;
                        n--;
                    }
                    suffix = 'GB'
            }
            ticks.push({v: val, f: formattedVal + suffix});
        }
        options.vAxis = options.vAxis || {};
        options.vAxis.ticks = ticks;
        chart.draw(data, options);
    });

    chart.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

查看工作示例:http://jsfiddle.net/asgallant/M58Wt/