javascript - 谷歌图表减少增加点

Question

如何在谷歌图表 API 中减少从开始和结束的增加点，例如从左右两侧减少 10 像素或其他

这是一个例子:

http://jsfiddle.net/WaUu2/374/

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Clicks');
    data.addColumn('number', 'Position');
    data.addRows([
            ['2003',  0, 0],
    ['2004',  0, 0],
    ['2005',  45, 60],
    ['2006',  155, 50],
    ['2007',  35, 31],
    ['2008',  105, 23],
    ['2009',  120, 56],
    ['2010',  65, 19],
    ['2011',  80, 23],
    ['2012',  70, 300],
    ['2013',  0, 0],
    ['2014',  0, 0]
    ]);

    var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};

    for (var i = 1; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);
        initState.selectedValues.push(data.getColumnLabel(i));
    }
     var chart = new google.visualization.ChartWrapper({
        chartType: 'AreaChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
                    fontSize: 11,
                    width: '90%',
                    height: '100%',
                    //colors: ["#36A6FF", "#FF8F36"],
                    focusTarget: "category",
                    backgroundColor: "transparent",
                    pointSize: 3,
                    legend: { "position": "in" },
                    hAxis: { minValue: 1, maxValue: 9 },
                    series: {
                        0: { color: '#36A6FF' },
                        1: { color: '#FF8F36' }
                        }
                }
    });

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Filter:',
                allowTyping: false,
                allowMultiple: true,
                allowNone: false,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });

    function setChartView () {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            view.columns.push(columnsTable.getValue(row, 0));
        }
        view.columns.sort(function (a, b) {
            return (a - b);
        });
        chart.setView(view);
        chart.draw();
    }
    google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

    setChartView();
    columnFilter.draw();
}

这就是它的样子。

Answer 1

try this: just replace your data.addRows([ ..])with

data.addRows([
    ['2003',  0, 0],
    ['2004',  0, 0],
    ['2005',  45, 60],
    ['2006',  155, 50],
    ['2007',  35, 31],
    ['2008',  105, 23],
    ['2009',  120, 56],
    ['2010',  65, 19],
    ['2011',  80, 23],
    ['2012',  70, 300],
    ['2013',  0, 0],
    ['2014',  0, 0]
]);