Question

我正在尝试使用Google的柱形图显示数据。我尝试显示没有堆叠的条形但是它不会从两端显示一个条形。然后我将属性isStacked更改为true，它会显示所有条形，但它会在两端裁剪条形。

Google Column Chart http://i45.tinypic.com/3h4za.png

我该如何解决这个问题？

我正在玩这些选项，但似乎没有任何效果。

 <script type='text/javascript'>
    google.load('visualization', '1', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawSizeChart);
    var d = 0;
    function drawSizeChart() {

        $.post('/metrics/SiteResourceChart', { fnsId: "@Model.FnsId", regionId: selectedValue },
            function (data) {
                if (Object.keys(data).length !== 0) {
                    var tdata = new google.visualization.DataTable();
                    tdata.addColumn('date', 'Date');
                    for (var p = 0; p < data.length; ++p) {
                        tdata.addColumn('number', data[p][0].PathName);
                    }

                    d = data[0].length;
                    for (var i = 0; i < data.length; ++i) {
                        for (var j = 0; j < data[i].length; ++j) {
                            var date = new Date(parseInt(data[i][j].CreatedAt.substr(6)));
                            var rCount = data[i][j].ResourceCount;
                            if (i === 0)
                                tdata.addRow([date, rCount, null]);
                            else
                                tdata.addRow([date, null, rCount]);
                        }
                    }


                    var options = {
                        title: 'Resource Count',
                        titleTextStyle: { fontSize: 20 },
                        isStacked: true,
                        bar: { groupWidth: '20%' },
                        chartArea: { left: '50' },
                        hAxis: { viewWindowMode: 'maximized' }

                        //legend: { position: 'none' }
                    };

                    var chart = new google.visualization.ColumnChart(document.getElementById('site_size_chart'));
                    chart.draw(tdata, options);
                }
            }
        );
    }
</script>

Answer 1

我想快速解决方案是将第一列定义为'string'而不是Date，并将hAxis.viewWindowMode保留为默认值。否则，您应配置hAxis.viewWindow对象（即最小/最大值）。

Answer 2

这里的问题相同。我所做的是，我在第一个日期前一天和最后一个日期后一天添加了0值的虚拟数据，以达到预期的效果。

使用columnchart包对我来说不是一个解决方案，因为我有几天没有数据，但想保持时间轴成比例。

Google柱形图裁剪条形图

2 个答案: