Question

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

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

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

Answer 1

查看我放在一起的this小提琴。

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);
};

如果在绘制图表后不动态更改数据，此解决方案可以正常工作。如果之后改变数据（例如使用控制），则该解决方案不允许垂直轴的自动缩放。如果更改了基础数据，则应在重新调用max之前重新计算draw值，以正确缩放垂直轴。

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

格式化Google Charts轴

1 个答案: