Google柱状图单个日期和值显示为多个辅助条 [英] Google Column Graph Single Date and value showing as multiple adjucent bars

问题描述

数据表结构如下：

  {
cols：[
 {
id：，
label：Date，
pattern：，
type：date
}，
 {
id：Col1，
label：Col1 Label，
pattern：，
type：number 

]，
rows：[
 {
c：[
 {
v：Date （2017,5,27）
}，
 {
v：213 
} 
] 
} 
] 
 
 $ / code> 



H轴选项

 hAxis：{
 slantedText：true，slantedTextAngle：35，
 titleTextStyle：{bold：false，fontSize：11，color：'＃610B38'}，
 textStyle：{
 bold：true，fontSize：8，color：'＃4d4d4d'
}，
 maxAlternation：1，
 showTextEvery：1，
 viewWindowMode： '最大化'，
网格线：
 {
 count：31 
}，
 bar：{groupWidth：40} 
 
} 
  

但是在列图中，它显示了多个相邻的小节，看起来像是时间而不是单个日期

这个问题只发生在单一的日期。

任何反馈意见赞赏

我想显示柱形图为单栏而不是大矩形。 >解决方案

建议在<$ c $上设置 min / max c> viewWindow 明确地

保持一天内应该防止列溢出

  viewWindow：{
 min：new Date（dateRange.min.getTime（） -  oneDay），
 max：new Date（dateRange.m ax.getTime（）+ oneDay）
} 
  

请参阅以下工作片段...

google.charts.load（'current'，{ callback：function（）{drawChart（）; $（window）.on（'resize'，drawChart）; }，package：['corechart']}）; function drawChart（）{var data = new google.visualization.DataTable（{cols：[{id：，label：Date pattern：，type：date}，{id：Col1，label：Col1 Label，pattern：，type：number}] rows：[{c：[{v：Date（2017，5，27）}，{v：213}]}]}）; var oneDay =（1000 * 60 * 60 * 24）; var dateRange = data.getColumnRange（0）; var chart = new google.visualization.ColumnChart（$（'。chart'）[0]）; chart.draw（data，{hAxis：{slantedText：true，slantedTextAngle：35，textStyle：{bold：true，fontSize：8，color：'＃4d4d4d'}，viewWindow：{min：new Date（dateRange.min.getTime （） - oneDay），max：new Date（dateRange.max.getTime（）+ oneDay）}}}）;}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js><<< ; / script>< script src =https://www.gstatic.com/charts/loader.js>< / script>< div class =chart>< / div> code> 





---

做为列的实际大小

发布说明从 2016年2月23日提及......

添加了指定栏的选项.WIDTH ， bar.gap ， bar.group.width （是 bar。 groupWidth ）和 bar.group.gap 。

<但只有一行数据时 ...

Data Table structure is as follows

    {
  "cols": [
    {
      "id": "",
      "label": "Date",
      "pattern": "",
      "type": "date"
    },
    {
      "id": "Col1",
      "label": "Col1 Label",
      "pattern": "",
      "type": "number"
    }
  ],
  "rows": [
    {
      "c": [
        {
          "v": "Date(2017, 5, 27)"
        },
        {
          "v": 213
        }
      ]
    }
  ]
}

H Axis options

        hAxis: {
      slantedText: true, slantedTextAngle: 35,
      titleTextStyle: {bold: false, fontSize: 11, color: '#610B38'},
      textStyle: {
        bold: true, fontSize: 8, color: '#4d4d4d'
      },
      maxAlternation: 1,
      showTextEvery: 1,
      viewWindowMode : 'maximized',
      gridlines:
      {
        count: 31
      },
       bar: { groupWidth: 40 }

    }

But in the column graph it is displaying multiple adjacent bars looks like time instead of a single date

This issue happening only for single date.

I want to display the column chart as single bar instead of big rectangle.

Any feedback appreciated

解决方案

recommend setting the min / max values on the viewWindow explicitly

keeping within a day should prevent "column overflow"

  viewWindow: {
    min: new Date(dateRange.min.getTime() - oneDay),
    max: new Date(dateRange.max.getTime() + oneDay)
  }

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).on('resize', drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {
        "id": "",
        "label": "Date",
        "pattern": "",
        "type": "date"
      },
      {
        "id": "Col1",
        "label": "Col1 Label",
        "pattern": "",
        "type": "number"
      }
    ],
    "rows": [
      {
        "c": [
          {
            "v": "Date(2017, 5, 27)"
          },
          {
            "v": 213
          }
        ]
      }
    ]
  });

  var oneDay = (1000 * 60 * 60 * 24);
  var dateRange = data.getColumnRange(0);
  var chart = new google.visualization.ColumnChart($('.chart')[0]);
  chart.draw(data, {
    hAxis: {
      slantedText: true,
      slantedTextAngle: 35,
      textStyle: {
        bold: true,
        fontSize: 8,
        color: '#4d4d4d'
      },
      viewWindow: {
        min: new Date(dateRange.min.getTime() - oneDay),
        max: new Date(dateRange.max.getTime() + oneDay)
      }
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart"></div>

---

not much you can do for the actual size of the column
the release notes from February, 23 2016 mention...

Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.

but none have ever worked for me when only one row of data...

这篇关于Google柱状图单个日期和值显示为多个辅助条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！