3

Google の縦棒グラフを使用してデータを表示しようとしています。バーを重ねずに表示してみましたが、両端から1本のバーが表示されません。次に、プロパティisStackedをtrueに変更すると、すべてのバーが表示されますが、バーの両端が切り取られます。

Google 縦棒グラフ

この問題を解決するにはどうすればよいですか?

オプションをいじっていましたが、何も機能していないようです。

 <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

ここで同じ問題。私がしたことは、目的の結果を達成するために、最初の日付の 1 日前と最後の日付の 1 日後に値が 0 のダミー データを追加したことです。

columnchart パッケージを使用することは、データのない日がありましたが、時間軸の比例を維持したかったため、私にとっては解決策ではありませんでした。

于 2012-09-18T05:43:21.790 に答える