谷歌图表组栏答案

【问题标题】：Google chart group bars谷歌图表组栏
【发布时间】：2018-01-24 13:01:58
【问题描述】：

我有一张与此类似的图形。每列都有自己的颜色，即颜色在每列中重复。但在传说中只会出现：绿、蓝、红。

var datainfo = [['Hora', 'Inicio', {role:'style'}], ['-4:00', 10, 'blue'], ..., ['-3:00', 10, 'blue'], ..., ['0:00', 10, 'green'], ..., ['3:00', 10, 'red']];
google.charts.setOnLoadCallback(function(){
                    var data = google.visualization.arrayToDataTable(datainfo);
                    var options = {
                        legend:{
                            position:'none'
                        },
                        width: obj.clientWidth,
                        height: 400,
                        title: 'Modulos quirurgicos',
                        chartArea: {
                            width: '90%'
                        },
                        hAxis: {
                            title: 'Hora',
                            minValue: 0
                        },
                            vAxis: {
                            title: 'Numero de modulos'
                        },
                    };

                    var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
                    chart.draw(data, options);
                });

有什么办法吗？谢谢

【问题讨论】：

正是我不知道如何将它们分组。我用特定颜色（绿色、红色或蓝色）绘制了每个条形图。我只想在图例中加入每种颜色的含义。或者，如果不是这样，可以对条进行分组（必须保持顺序，这就是我无法使用系列的原因）。
我觉得我解释得不好。我有一组从 -X 小时到 X 小时不等的条形图。类似于以 0 为中心的高斯分布。我想要的是为左侧的条（无穷大，-Y] 小时和右侧的条从 [Z，无穷大）绘制不同的颜色。由于我不知道另一种技术，我将每个条都涂上了特定的颜色。我想添加一个简单的图例：+ 绿色：接受区域。 + 红色：超出区域。 + 蓝色：未超出区域。这是我正在使用的代码示例：jsfiddle.net/y7goebyy/1

标签： javascript html charts google-visualization

【解决方案1】：

听起来你想为每个人创建一个系列
为此，每组值都需要位于数据表中自己的列中

类似...

var data = google.visualization.arrayToDataTable([
  ['Hora', 'Region not exceeded', 'Accepted Region', 'Region exceeded'],
  ["-04:00", 1, null, null],
  ["00:00", null, 1902, null],
  ["+13:30", null, null, 0],
  ...

然后您可以使用colors 图表选项分配颜色...

colors: ['#00f', '#0f0', '#f00']

您还可以使用数据视图将数据表转换为这种格式
请参阅以下工作 sn-p...

在这里，我不确定如何确定颜色何时应该改变，
所以数据表中提供的颜色用来判断哪一列取值

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  window.addEventListener('resize', drawChart, false);
  drawChart();
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Hora', 'Inicio', {role: 'style'}],
    ["-04:00",1,"color:#00f"],
    ["-03:30",1,"color:#00f"],
    ["-03:00",5,"color:#00f"],
    ["-02:30",9,"color:#00f"],
    ["-02:00",12,"color:#00f"],
    ["-01:30",48,"color:#00f"],
    ["-01:00",65,"color:#0f0"],
    ["-00:30",663,"color:#0f0"],
    ["00:00",1902,"color:#0f0"],
    ["+00:30",996,"color:#0f0"],
    ["+01:00",755,"color:#0f0"],
    ["+01:30",296,"color:#f00"],
    ["+02:00",172,"color:#f00"],
    ["+02:30",114,"color:#f00"],
    ["+03:00",83,"color:#f00"],
    ["+03:30",65,"color:#f00"],
    ["+04:00",45,"color:#f00"],
    ["+04:30",40,"color:#f00"],
    ["+05:00",31,"color:#f00"],
    ["+05:30",32,"color:#f00"],
    ["+06:00",23,"color:#f00"],
    ["+06:30",20,"color:#f00"],
    ["+07:00",6,"color:#f00"],
    ["+07:30",1,"color:#f00"],
    ["+08:00",1,"color:#f00"],
    ["+08:30",1,"color:#f00"],
    ["+09:00",2,"color:#f00"],
    ["+09:30",0,"color:#f00"],
    ["+10:00",0,"color:#f00"],
    ["+10:30",0,"color:#f00"],
    ["+11:00",0,"color:#f00"],
    ["+11:30",1,"color:#f00"],
    ["+12:00",0,"color:#f00"],
    ["+12:30",0,"color:#f00"],
    ["+13:00",1,"color:#f00"],
    ["+13:30",0,"color:#f00"]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,
    {
      label: 'Region not exceeded',
      calc: function (dt, row) {
        var value = null;
        if (dt.getValue(row, 2) === 'color:#00f') {
          value = dt.getValue(row, 1);
        }
        return value;
      },
      type: 'number'
    },
    {
      label: 'Accepted Region',
      calc: function (dt, row) {
        var value = null;
        if (dt.getValue(row, 2) === 'color:#0f0') {
          value = dt.getValue(row, 1);
        }
        return value;
      },
      type: 'number'
    },
    {
      label: 'Region exceeded',
      calc: function (dt, row) {
        var value = null;
        if (dt.getValue(row, 2) === 'color:#f00') {
          value = dt.getValue(row, 1);
        }
        return value;
      },
      type: 'number'
    }
  ]);

  var options = {
    colors: ['#00f', '#0f0', '#f00'],
    bar: {
      groupWidth: '100%'
    },
    legend: {
      alignment: 'end',
      position: 'top'
    },
    width: '100%',
    height: 400,
    title: 'Modulos quirurgicos',
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 72,
      right: 16,
      bottom: 72
    },
    hAxis: {
      title: 'Hora',
      minValue: 0
    },
    vAxis: {
      title: 'Numero de modulos'
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

更新

使用样式列作为颜色，
您可以使用图表方法选择多个柱 --> getSelection
它需要一个应选择的行数组

使用数据表方法getFilteredRows确定选择哪些行

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  window.addEventListener('resize', drawChart, false);
  drawChart();
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Hora', 'Inicio', {role: 'style'}],
    ["-04:00",1,"#00f"],
    ["-03:30",1,"#00f"],
    ["-03:00",5,"#00f"],
    ["-02:30",9,"#00f"],
    ["-02:00",12,"#00f"],
    ["-01:30",48,"#00f"],
    ["-01:00",65,"#0f0"],
    ["-00:30",663,"#0f0"],
    ["00:00",1902,"#0f0"],
    ["+00:30",996,"#0f0"],
    ["+01:00",755,"#0f0"],
    ["+01:30",296,"#f00"],
    ["+02:00",172,"#f00"],
    ["+02:30",114,"#f00"],
    ["+03:00",83,"#f00"],
    ["+03:30",65,"#f00"],
    ["+04:00",45,"#f00"],
    ["+04:30",40,"#f00"],
    ["+05:00",31,"#f00"],
    ["+05:30",32,"#f00"],
    ["+06:00",23,"#f00"],
    ["+06:30",20,"#f00"],
    ["+07:00",6,"#f00"],
    ["+07:30",1,"#f00"],
    ["+08:00",1,"#f00"],
    ["+08:30",1,"#f00"],
    ["+09:00",2,"#f00"],
    ["+09:30",0,"#f00"],
    ["+10:00",0,"#f00"],
    ["+10:30",0,"#f00"],
    ["+11:00",0,"#f00"],
    ["+11:30",1,"#f00"],
    ["+12:00",0,"#f00"],
    ["+12:30",0,"#f00"],
    ["+13:00",1,"#f00"],
    ["+13:30",0,"#f00"]
  ]);

  var options = {
    legend: {
      position: 'none'
    },
    width: '100%',
    height: 400,
    title: 'Modulos quirurgicos',
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 72,
      right: 16,
      bottom: 72
    },
    hAxis: {
      title: 'Hora',
      minValue: 0
    },
    series: {
      0: {targetAxisIndex: 0},
      1: {targetAxisIndex: 1},
      2: {targetAxisIndex: 2}
    },
    vAxis: {
      title: 'Numero de modulos',
      viewWindow: {
        min: 0,
        max: 2000
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    document.getElementById('btn-select-blue').addEventListener('click', selectSeries, false);
    document.getElementById('btn-select-green').addEventListener('click', selectSeries, false);
    document.getElementById('btn-select-red').addEventListener('click', selectSeries, false);
  });

  chart.draw(data, options);

  function selectSeries(sender) {
    var colorSelected = sender.target.getAttribute('data-color');
    var colorRows = data.getFilteredRows([{
      column: 2,
      value: colorSelected
    }]);
    var selection = [];
    colorRows.forEach(function (rowIndex) {
      selection.push({
        row: rowIndex
      });
    });
    chart.setSelection(selection);
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="btn-select-blue" type="button" value="Select Blue" data-color="#00f" />
<input id="btn-select-green" type="button" value="Select Green" data-color="#0f0" />
<input id="btn-select-red" type="button" value="Select Red" data-color="#f00" />
<div id="chart_div"></div>

【讨论】：

非常感谢！这正是我正在寻找的。还有两个问题：我可以消除或减少条之间的空间吗？假设我有两个直方图，我必须将它们组合起来，也就是说，每个小时都有两个条形图。我可以在不添加新系列的情况下做到这一点吗？这就是我的意思：jsfiddle.net/y7goebyy/2 或者我应该添加以下系列：区域超出开始，区域未超出开始，接受区域开始，区域超出结束，区域未超出结束，接受区域结束。再次感谢您的帮助。
这就是多系列柱形图的问题，每小时为每个系列分配空间，即使对于null 值也是如此——bar.groupWidth: '100%' 上方使用的选项会删除条形之间的所有空间，但是每个点都缺少两个条-添加更多列/系列只会使情况变得更糟-您最好使用样式列进行颜色并构建自己的图例...
如果它是它应该的......有一些方法可以使用按钮选择某些条。这基本上是因为当您将鼠标放在图例的标签上时（Accepted Region example），选择一些特定的条，我想在我自己的图例中模拟这一点。感谢大家的帮助！
谢谢！这就是我要找的东西！