Question

民间，

我试图使用谷歌图表API创建柱形图，我在获取Y-AXIS线时遇到很多问题。

我理解x轴是字符串，这就是为什么垂直网格线不会到来而Y轴线必须来的原因。我现在用RED标记这条线不会到来。

enter image description here

我有以下代码。

function drawChartSecond(resp) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Activity');
    data.addColumn('number', 'Hours');

    data.addRows([
        ['Work', 11],
        ['Eat', 2 ],
        ['Commute', 2 ],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);
    var options = {
        title : '',
        legend: {
            position: 'right',
            alignment: 'center'
        },
        tooltip: {
            isHtml: true
        },
        hAxis: {
            title: 'Activity',
            titleTextStyle: {
                color: 'Black',
                fontSize : '12',
                fontName : 'Arial'
            },
            baselineColor: '#CCCCCC'
        },
        chartArea : {
            left: '8%',
            top: '8%',
            height:'70%',
            width:'100%'
        }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById('chartdivsecond'));
    chart.draw(data, options);
}

Answer 1

获得该基线的唯一方法是使用具有连续轴的图表。您可以使用DataView将数据转换为格式正确的数字，并使用hAxis.ticks选项重新标记轴刻度标记，使其看起来正确：

function drawChartSecond(resp) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Activity');
    data.addColumn('number', 'Hours');
    data.addRows([
        ['Work', 11],
        ['Eat', 2 ],
        ['Commute', 2 ],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([{
        type: 'number',
        label: data.getColumnLabel(0),
        calc: function (dt, row) {
            return {v: row + 1, f: dt.getValue(row, 0)};
        }
    }, 1]);

    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        ticks.push({v: i + 1, f: data.getValue(i, 0)});
    }

    var options = {
        title : '',
        legend: {
            position: 'right',
            alignment: 'center'
        },
        tooltip: {
            isHtml: true
        },
        hAxis: {
            title: 'Activity',
            titleTextStyle: {
                color: 'Black',
                fontSize : '12',
                fontName : 'Arial'
            },
            baselineColor: '#CCCCCC',
            ticks: ticks
        },
        chartArea : {
            left: '8%',
            top: '8%',
            height:'70%',
            width:'100%'
        }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById('chartdivsecond'));
    chart.draw(view, options);
}

参见工作示例：http://jsfiddle.net/asgallant/6mXkv/

垂直线问题（谷歌图表）

1 个答案: