3

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

谷歌柱形图

我该如何解决这个问题？

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

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

2 回答 2

0

我想一个快速的解决方案是将您的第一列定义为“字符串”而不是日期，并将 hAxis.viewWindowMode 保留为默认值。否则，您应该配置hAxis.viewWindow对象（即最小/最大值）。

于 2012-06-27T01:05:57.187 回答
0

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

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

于 2012-09-18T05:43:21.790 回答