格式化Google图表轴

Question

有人知道我该如何在Google图表上重新格式化我的坐标轴吗？

目前，我在v轴上列出了字节，但我不想让它显示字节，而是希望它显示KB，因为有时值会上升到数十万。

我尝试阅读配置选项（特别是vAxis.format），但是它似乎不支持我要尝试的操作。 我可以以这种方式设置我的V轴格式，还是只能以字节显示它？

Answer 1

看看这个小提琴我放在一起。

google.setOnLoadCallback(drawStuff);

function drawStuff() {

    var data = new google.visualization.arrayToDataTable([
        ['Move', 'Percentage'],
        ["King's pawn (e4)", 4400000000],
        ["Queen's pawn (d4)", 3100000000],
        ["Knight to King 3 (Nf3)", 1200000000],
        ["Queen's bishop pawn (c4)", 200000000],
        ['Other', 100000000]
    ]);

    var ranges = data.getColumnRange(1);

    var log1024 = Math.log(1024);

    var scaleSuffix = [
        "B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

    function byteFormatter(options) {}

    byteFormatter.prototype.formatValue = function (value) {
        var scale = Math.floor(Math.log(value) / log1024);
        var suffix = scaleSuffix[scale];
        var scaledValue = value / Math.pow(1024, scale);
        return Math.round(scaledValue * 100) / 100 + " " + suffix;
    };

    byteFormatter.prototype.format = function (dt, c) {
        var rows = dt.getNumberOfRows();
        for (var r = 0; r < rows; ++r) {
            var v = dt.getValue(r, c);
            var fv = this.formatValue(v);
            dt.setFormattedValue(r, c, fv);
        }
    };

    var formatter = new byteFormatter();

    formatter.format(data, 1);

    var max = ranges.max * 1;

    var options = {
        title: 'Chess opening moves',
        width: 900,
        legend: {
            position: 'none'
        },
        chart: {
            subtitle: 'popularity by percentage'
        },
        allowHtml: true,
        vAxis: {
            ticks: [{
                v: 0
            }, {
                v: max * 0.2,
                f: formatter.formatValue(max * 0.2)
            }, {
                v: max * 0.4,
                f: formatter.formatValue(max * 0.4)
            }, {
                v: max * 0.6,
                f: formatter.formatValue(max * 0.6)
            }, {
                v: max * 0.8,
                f: formatter.formatValue(max * 0.8)
            }, {
                v: max,
                f: formatter.formatValue(max)
            }]
        },
        axes: {
            x: {
                0: {
                    side: 'top',
                    label: 'White to move'
                } // Top x-axis.
            },
        },
        bar: {
            groupWidth: "90%"
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, options);
};

如果在绘制图表后不动态更改数据，则此解决方案效果很好。 如果之后更改了数据（例如使用控件），则此解决方案不允许垂直轴自动缩放。 如果基础数据已更改，则应在再次调用draw之前重新计算max ，以正确缩放垂直轴。

我知道这是一个老问题，您可能已经继续前进...我找不到其他人在做类似的事情，并遇到了相同的情况。