Question

我的图表工作正常，但是我想为我的垂直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轴是周数。

希望有人可以提供帮助。

保

Answer 1

我就是这样做的：

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

一切顺利;）

Answer 2

据我所知，Google图表设置无法自动完成此操作。

我已经编写了一个javascript函数来执行此操作。

要使用它，您可以创建一个漂亮的序列，可用作垂直轴的刻度：

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

应更改xAxis的行以应用刻度：

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

Answer 3

嗨请参考google chart api。根据您的要求，有几个参数可供选择，如

chbh =条宽和间距......

chco =系列颜色......

chd =图表数据字符串......

chdl，chdlp，chdls =图表图例文字和样式......

chds缩放具有自定义范围的文本格式...

chem =动态图标标记......

了解更多信息 http://code.google.com/apis/chart/image/docs/chart_params.html

Google Chart Api - 自定义轴步骤

3 个答案: