Форматирование осей Google Charts - PullRequest
Новая
       15

Форматирование осей Google Charts

1 голос
/ 09 октября 2011

Кто-нибудь знает, как я могу переформатировать свои оси в Google Charts?

В данный момент я перечисляю байты на моей оси v, но вместо того, чтобы показывать байты, я хочу, чтобы он отображал КБ, потому что иногда значения доходят до сотен тысяч.

Я попытался прочитать параметры конфигурации (в частности, vAxis.format), но, похоже, он не поддерживает то, что я пытаюсь сделать. Могу ли я отформатировать свою ось V таким способом или я могу показывать ее только в байтах?

1 Ответ

3 голосов
/ 07 июля 2015

Проверьте эту скрипку, которую я собрал. 

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, чтобы правильно масштабировать вертикальную ось.

Я знаю, что это старый вопрос, и вы, вероятно, уже перешли ... Я не мог найти кого-то, кто делал бы что-то подобное, и столкнулся с тем же сценарием.

...