4

我正在使用以下显示我的记录的柱形图，我想在生成的条之间留出空格，请帮忙。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', '11-02-2013', '11-02-2013','11-02-2013','11-02-2013'],

          ['Weeks',  10,20,30,5],


        ]);

            var options = {
              title: 'Weekly Average Weight Loss Performance Chart For All Users',
              is3D: true,
              //isStacked: true,
               isHtml: false,
              // colors: ['d2ac2c', 'ff0000', '029748'],
               bar: { groupWidth: '10%' },
               legend:{position: 'bottom'},
               //chbh:'0,10,0',
              //hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
            };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

在此处输入图像描述

4

2 回答 2

2

var options = { bar: { groupWidth: '100%' },

于 2015-12-16T13:28:45.500 回答
1

柱形图的通常格式是每个系列都有自己的列，按行分组。由于您在同一行中拥有所有 4 个数据点，因此您最终会将它们全部聚集在同一组中。如果您更改数据，您将得到分离，因为每个数据都将在一个单独的组中：

var data = google.visualization.arrayToDataTable([
  ['Date', 'Data'],
  ['11-02-2013', 10],
  ['11-02-2013', 20],
  ['11-02-2013', 30],
  ['11-02-2013', 5]
]);

如果你想显示多个人，按周分组，那么你会做这样的事情：

var data = google.visualization.arrayToDataTable([
  ['Date', 'Alan', 'Beatrice', 'Charlie', 'Diana'],
  ['11-02-2013', 10, 5, 15, 20],
  ['11-02-2013', 20, 1, 2, 3],
  ['11-02-2013', 30, 25, 20, 15],
  ['11-02-2013', 5, 7, 9, 11]
]);

这将按周对您的数据进行分组（因此所有 4 个人将在同一周显示为一个组），而周之间存在间隔（每个“组”数据之间）。

于 2013-02-12T03:01:39.037 回答