javascript - 如何从最左边的点开始获取谷歌图表 X 轴点

Question

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

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

这是我的代码。

<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 ”设置来自动计算空数据点的位置。

由于两个图表现在具有相同数量的数据点，最终结果是这样的：

必须插入空数据点远非理想，但此解决方案表明您的问题的答案是可能的。