Google Chart Api - шаг пользовательской оси - PullRequest
2 голосов
/ 12 сентября 2011

Моя диаграмма работает нормально, однако я бы хотел использовать пользовательский шаг для своей вертикальной оси Y.На данный момент он кажется автоматическим и расположен следующим образом:

1,500,000
3,000,000
4,500,000

Я бы предпочел, чтобы оно было:

100,000
200,000
300,000
and so on...

Есть ли способ установить это, япросмотрел всю документацию, но не могу ее понять.

Вот мой код:

var chart = new google.visualization.LineChart(document.getElementById('chart'));
            chart.draw(chartData, { width: 1600, height: 900, title: 'Company Performance',
                yAxis: { gridlineColor: '#ff0000' },
                xAxis: { gridlineColor: '#ff0000' }
                }
            );

Мои данные - прибыль компании за каждую неделю года, ось Y -прибыль, ось X - номер недели.

Надеюсь, что кто-нибудь может помочь.

Пол

Ответы [ 3 ]

2 голосов
/ 05 марта 2014

Вот как я это делаю:

var options = {
    vAxis: {            // same thing for horisontal, just use hAxis
        viewWindow: {   // what range will be visible
            max: 120,
            min: 0
        },
        gridlines: {
            count: 12   // how many gridlines. You can set not the step, but total count of gridlines.
        }
    }
};

всего наилучшего;)

0 голосов
/ 11 июля 2014

Насколько я знаю, это не может быть сделано автоматически с настройками Google Charts.

Я написал функцию javascript для этого.

Чтобы использовать его, вы можете создать красивую последовательность, которую можно использовать в качестве тиков для вертикальной оси:

var prettyTicks = getChartTicks(0, chartData.getColumnRange(1).max);

Линия для оси x должна быть изменена для применения тиков:

yAxis: { gridlineColor: '#ff0000', ticks: prettyTicks },

Вот метод javascript для создания тиков.Он будет создавать тик для каждого значения 10, и если он создает слишком много тиков, он будет делать это для каждых 100 или 1000 и т. Д.

    // Creates an array of values that can be used for the tick property of the Google Charts vAxis
    // The values provide a nice scale to have a clean view. 
    var getChartTicks = function (min, max) {
        // settings
        var maxTicks = 8;
        var tickSize = 10;

        // determine the range of the values and the number of ticks
        var newMin;
        var newMax;
        var nrOfTicks;
        var appliedTickSize = 1;
        while (newMin == null || nrOfTicks > maxTicks) {
            appliedTickSize *= tickSize;

            newMin = Math.floor(min / appliedTickSize) * appliedTickSize;
            newMax = Math.ceil(max / appliedTickSize) * appliedTickSize;
            nrOfTicks = (newMax - newMin) / appliedTickSize;
        }

        // generate the tick values which will be applied to the axis
        var ticks = new Array();
        var i = 0;
        for (var v = newMin; v <= newMax; v += appliedTickSize) {
            ticks[i++] = v;
        }

        return ticks;
    }

Итак, подведем итог, после добавления этого метода ваш код можетизменить на:

var prettyTicks = getChartTicks(0, chartData.getColumnRange(1).max);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
        chart.draw(chartData, { width: 1600, height: 900, title: 'Company Performance',
            yAxis: { gridlineColor: '#ff0000', ticks: prettyTicks },
            xAxis: { gridlineColor: '#ff0000' }
            }
        );
0 голосов
/ 15 января 2012

Привет. Пожалуйста, обратитесь к API диаграммы Google.В соответствии с вашими требованиями доступно несколько параметров, например

chbh = ширина полосы и расстояние ...

chco = Серия цветов ...

chd = строка данных диаграммы ...

chdl, chdlp, chdls = текст и стиль легенды диаграммы ...

chds Масштаб для текстового формата с настраиваемым диапазоном ...

chem = Динамические маркеры значков ...

для получения дополнительной информации http://code.google.com/apis/chart/image/docs/chart_params.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...