如何获得谷歌图表X轴点开始在最左边的点(How to get google charts X-Axi

2019-10-18 19:53发布

我使用谷歌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/

为了实现这一点,我插空数据点到“数据2”,以确保两个图表会有点相同数量的:

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

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

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

不必插入空数据点是远远不够理想,但这种解决方案显示了一个回答你的问题是可能的。



文章来源: How to get google charts X-Axis points starting at the left most point