如何获取谷歌排行榜X-Axis积分从最左边开始

Question

我在我的应用程序中使用Google API作为图表。为此，我在同一页面中使用多个图表。我的问题是给图表填充，如果我给出更多的点，图表区域占用更多的空间，如果我只给出几个点，图表区域占用的空间更少，中心对齐。 第一个图表从左到右正确对齐，第二个图表有两个点在中心对齐。

如何从最左边到最右边的点对齐所有图表，就像在第一张图表中一样？

这是我的代码。

<script>                                                     

             var data1 = google.visualization.arrayToDataTable([
                    ['year', 'Cats'],                       
                    ['2009',   20],
                    ['2010',   23],
                    ['2011',   34],
                    ['2012',   43]
            ]);  
            var data2 = google.visualization.arrayToDataTable([
                    ['year', 'Cats'],                       
                    ['2007',   20],
                    ['2008',   23]

            ]);                 
        var options = {
            pointSize: 5,
            width: 211,
            height: 90,
            backgroundColor: '#ffffff',
            chartArea: {
            left: 10,
            top: 10,
            width: 195,
            height: 56
        },
            legend: {position: 'none'},
            hAxis: {
            baselineColor: '#fff',
            gridlineColor: '#fff',
            textStyle: {italic: false, color: '#ccc', fontSize: 10}
        },
        vAxis: {
            baselineColor: '#fff',
            gridlineColor: '#fff',
            textPosition: 'none'
        },
        tooltip: {
            textStyle: {fontSize: 10}
        },
        series:{
            0:{
                color:'#0066CC'
            }
        }
    };
    var chart1 = new google.visualization.LineChart(document.getElementById('chart1'));
    var chart2 = new google.visualization.LineChart(document.getElementById('chart2'));
    chart1.draw(data1, options);
    chart2.draw(data2, options);
</script> 

Answer 1

请参阅以下小提琴，了解如何将两个图表的起点和终点垂直对齐：

http://jsfiddle.net/Fresh/E2yq6/

为实现这一点，我将空数据点插入“data2”以确保两个图表具有相同的点数：

var data2 = google.visualization.arrayToDataTable([
    ['year', 'Cats'],                       
    ['2007',   20],
    [null, null],
    [null, null],
    ['2008',   23]
]);

然后我使用第二个图表的选项对象中的“interpolateNulls : true”设置自动计算空数据点的位置。

由于两个图表现在具有相同数量的数据点，因此最终结果为：

必须插入空数据点远非理想，但此解决方案显示可以回答您的问题。