javascript - Google 图表组条形图

Question

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

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);
                });

有什么办法吗？谢谢

Answer 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']

您还可以使用数据 View 将数据表转换为这种格式
请参阅以下工作片段...

在这里，我不确定如何确定颜色何时应该改变，
因此数据表中提供的颜色用于确定哪一列获取值

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来确定要选择哪些行

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

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>