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

您还可以使用数据视图将数据表转换为此格式请参阅以下工作代码段...

在这里，我不确定如何确定颜色何时应该改变，
所以数据表中提供的颜色用于确定哪个列获得值

＆＃13;

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

＆＃13;

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

＆＃13;

更新

使用样式列进行颜色，
您可以使用图表方法选择多个条形图 - ＆gt; getSelection
它采用了应该选择的行数组

使用数据表方法getFilteredRows来确定要选择的行

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

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

＆＃13;

谷歌图表组吧

1 个答案: