Question

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

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

enter image description here

Answer 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个人将在同一周内显示为单个组），周数之间存在差距（每个“组”数据之间）。

Answer 2

var options = { bar：{groupWidth：'100％'}，

是否可以使用Google ColumnChart在栏之间留出空格

2 个答案: