将Google可视化折线图hAxis原点设置为其初始值

Set Google visualization line chart hAxis origin to its initial value

本文关键字：设置原点 Google 可视化折线图 hAxis 更新时间：2023-09-26

这是一个有粘性折线图的示例，其中图表绘制为

 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

如果要将线条拉伸到图表的边缘，则需要为域轴使用连续数据类型（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/