Question

假设我有一个像这样的数据表：

    drivingData.addColumn('string', 'VehicleGroup');
    drivingData.addColumn('number', 'TimeType');
    drivingData.addColumn('number', 'TimeTarget');
    drivingData.addColumn('number', 'TimeUsed');

然后我像这样添加4行：

 drivingData.addRow(['Trucks-S',0, 1000, 1200])
 drivingData.addRow(['Trucks-F',1, 300, 500])
 drivingData.addRow(['Trailer-S',0, 1200, 1500])
 drivingData.addRow(['Trailer-F',1, 100, 500])

我想要一个'堆积'柱形图。第一个显示Trucks-S，TimeType为0，黄色和橙色。第二个将显示具有灰色和浅灰色的TimeType 1的Trucks-F。

然后第三个将再次变为黄色和橙色，第四个灰色和浅灰色等等......

这可能吗？

这样的事情： https://imgur.com/a/oNOiP

Answer 1

请求的图表仅作为材料条形图

提供

材料 - ＆gt; google.charts.Bar - packages: ['bar']

经典 - ＆gt; google.visualization.ColumnChart - packages: ['corechart']

您可以将材料条形图分成多个堆栈，
通过将一组系列分配给不同的y轴
这是通过使用series选项

完成的

series: {
  2: {
    targetAxisIndex: 1
  },
  3: {
    targetAxisIndex: 1
  }
},

这将在图表的右侧创建第二个轴，
默认情况下会有不同的比例保持两个y轴同步，分配一个特定的视图窗口

vAxis: {
  viewWindow: {
    min: 0,
    max: 3000
  }
}

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

＆＃13;

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var drivingData = new google.visualization.DataTable();
  drivingData.addColumn('string', 'VehicleGroup');
  drivingData.addColumn('number', 'TimeTarget');
  drivingData.addColumn('number', 'TimeUsed');
  drivingData.addColumn('number', 'TimeTarget');
  drivingData.addColumn('number', 'TimeUsed');
  drivingData.addRow(['Trucks-S', 1000, 1200, 600, 800])
  drivingData.addRow(['Trucks-F', 300, 500, 700, 900])
  drivingData.addRow(['Trailer-S', 1200, 1500, 800, 1000])
  drivingData.addRow(['Trailer-F', 100, 500, 600, 1000])

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);
  var options = google.charts.Bar.convertOptions({
    colors: ['#fbc02d', '#616161'],
    height: 400,
    isStacked: true,
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      }
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 3000
      }
    }
  });

  chart.draw(drivingData, options);
});

＆＃13;

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

＆＃13;

注意：请记住，
材料图表不支持多种配置选项看 - ＆gt; Tracking Issue for Material Chart Feature Parity

编辑

isStacked: 'percent'目前不受材料图表

的支持

要解决此问题，请在绘制图表之前手动转换数据

请参阅以下工作片段，
y轴列将以两个为一组进行转换......

＆＃13;

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var drivingData = new google.visualization.DataTable();
  drivingData.addColumn('string', 'VehicleGroup');
  drivingData.addColumn('number', 'TimeTarget');
  drivingData.addColumn('number', 'TimeUsed');
  drivingData.addColumn('number', 'TimeTarget');
  drivingData.addColumn('number', 'TimeUsed');
  drivingData.addRow(['Trucks-S', 1000, 1200, 600, 800])
  drivingData.addRow(['Trucks-F', 300, 500, 700, 900])
  drivingData.addRow(['Trailer-S', 1200, 1500, 800, 1000])
  drivingData.addRow(['Trailer-F', 100, 500, 600, 1000])

  // convert data to percent
  var percentData = new google.visualization.DataTable();
  for (var col = 0; col < drivingData.getNumberOfColumns(); col++) {
    percentData.addColumn(drivingData.getColumnType(col), drivingData.getColumnLabel(col));
  }
  for (var row = 0; row < drivingData.getNumberOfRows(); row++) {
    var newRow = percentData.addRow();
    percentData.setValue(newRow, 0, drivingData.getValue(row, 0));
    for (var col = 1; col < drivingData.getNumberOfColumns(); col++) {
      if ((col % 2) !== 0) {
        var rowTotal = drivingData.getValue(row, col) + drivingData.getValue(row, (col + 1));
        percentData.setValue(newRow, col, (drivingData.getValue(row, col) / rowTotal));
        percentData.setValue(newRow, (col + 1), (drivingData.getValue(row, (col + 1)) / rowTotal));
      }
    }
  }

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);
  var options = google.charts.Bar.convertOptions({
    colors: ['#fbc02d', '#616161'],
    height: 400,
    isStacked: true,
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      }
    },
    vAxis: {
      format: '0%',
      viewWindow: {
        min: 0,
        max: 1
      }
    }
  });

  chart.draw(percentData, options);
});

＆＃13;

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

＆＃13;

谷歌图表，柱形图每列两种不同的颜色

1 个答案: