javascript - 格式化谷歌图表轴

Question

有人知道如何在 Google Charts 上重新格式化坐标轴吗？

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

我已经尝试阅读配置选项(特别是 vAxis.format)，但它似乎不支持我正在尝试做的事情。我可以用这种方式格式化我的 v 轴还是只能以字节显示它？

Answer 1

查看 this我放在一起的 fiddle 。

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 值，以正确缩放垂直轴。

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