Google visualization 是否可以使用Google ColumnChart在条间留出空间_Google Visualization

Google visualization 是否可以使用Google ColumnChart在条间留出空间

google-visualization

Google visualization 是否可以使用Google ColumnChart在条间留出空间,google-visualization,Google Visualization,我正在使用下面的柱状图显示我的记录，我想给正在生成的条之间的空格，请帮助 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:[

我正在使用下面的柱状图显示我的记录，我想给正在生成的条之间的空格，请帮助

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


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“日期”、“2013年2月11日”、“2013年2月11日”、“2013年2月11日”、“2013年2月11日”]，
[‘周’、10、20、30、5]，
]);
变量选项={
标题：“所有用户每周平均减肥表现图”，
is3D：是的，
//isStacked：是的，
isHtml：错，
//颜色：['d2ac2c'，'ff0000'，'029748']，
条：{groupWidth:'10%}，
图例：{位置：'bottom'}，
//chbh:'0,10,0'，
//hAxis:{title:'Year'，titleTextStyle:{color:'red'}
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

柱状图的通常格式是每个系列都有自己的列，按行分组。由于所有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个人将在同一周内显示为一个组），并在周与周之间（每个“数据组”之间）留有间隙。

var options={

bar:{groupWidth:'100%}，

答案应该比这更完整。虽然这可能会回答这个问题，但更多的上下文会有所帮助。这不会增加分组在一起的两个条之间的空间。它只会调整条的宽度