javascript - 将 Google 可视化折线图 hAxis origin 设置为其初始值

Question

这是一个sample fiddle使用谷歌折线图绘制图表，

 var Xmin = data.getValue(0, 0);

        var options = {
                title : 'Sample graph',
                legend : {
                    position : 'bottom'
                },
                height : 400,
                interpolateNulls : true,
                'pointSize' : 5,
                'vAxis' : {
                    title : "Count",
                    'minValue' : 0,
                },
                'hAxis' : {
                    title : "Month",
                    'minValue' : Xmin,
                },
                'animation' : {
                    'duration' : 1000,
                    'easing' : 'in'
                },
            };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

如何将 hAxis 原点设置为 Jan-13 而不是 0

Answer 1

如果要将线条拉伸(stretch)到图表的边缘，则需要为域轴使用连续数据类型(number、date、datetime, timeofday) 而不是离散的 (string) 类型。由于您的数据是月份和年份，您可以使用 date 类型:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Sales', 'Expenses'],
        [new Date(2013, 0), 1000, 400],
        [new Date(2013, 1), 1170, 460],
        [new Date(2013, 2), 660, 1120],
        [new Date(2013, 3), 1030, 540]
    ]);

    // get the range of dates
    var range = data.getColumnRange(0);
    // pull back the start just a bit so the first axis label will show
    range.min = new Date(range.min);
    range.min.setMilliseconds(-1);

    // format the dates
    var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM-yy'});
    dateFormatter.format(data, 0);

    var options = {
        title : 'Sample graph',
        legend : {
            position : 'bottom'
        },
        height : 400,
        interpolateNulls : true,
        pointSize : 5,
        vAxis : {
            title : "Count",
            minValue : 0,
        },
        hAxis : {
            title : "Month",
            format: 'MMM-yy',
            viewWindow: {
                min: range.min,
                max: range.max
            }
        },
        animation : {
            duration : 1000,
            easing : 'in'
        },
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});

参见示例:http://jsfiddle.net/asgallant/k3c9Q/