如何获取Google图表从最左侧的点开始的X轴点 [英] How to get google charts X-Axis points starting at the left most point

问题描述

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

I'm using the Google API for charts in my application. For that I'm using multiple charts in the same page. My problem is giving padding to the charts, if I give more points the chart area occupy more space in that div and if i give only a few points the chart area occupy less space and in center aligned. the first chart is aligned properly from left to right and the second chart with two points is aligned in center.

< img src =https://i.stack.imgur.com/BqL72.pngalt =enter image description here>

如何使所有

这里是我的代码。

<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> 

推荐答案

两个图表的端点垂直对齐：

See the following fiddle for how I got the start and end points of both charts to be vertically aligned:

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

为了实现这一点，我在data2中插入了空数据点，以确保两个图表相同的点数：

To achieve this I inserted null data points into "data2" to ensure that both charts would have the same amount of points:

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

然后我使用 interpolateNulls：true 设置自动计算空数据点的位置。

I then used the "interpolateNulls : true" setting in the second chart's options object to automatically calculate the positions of the null data points.

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

As both charts now have the same amount of data points the end result is this:

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

Having to insert the null data points is far from ideal, but this solution shows that an answer to your question is possible.

这篇关于如何获取Google图表从最左侧的点开始的X轴点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！