如何创建具有可变宽度重叠列的javascript柱形图

Question

我正在尝试创建一个柱形图，我可以在其中指定每列开始和在x轴上完成的位置，并且列重叠，如下图所示。

我查看了谷歌排行榜和图表，但没有看到类似的东西。我如何创建这样的图表？

Overlapping column chart

Answer 1

谷歌图表示例......

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2', 'y3'],
    [6, 0, null, null, null],
    [6, 55, null, null, null],
    [36, 55, null, null, null],
    [36, 0, null, null, null],
    [32, null, 0, null, null],
    [32, null, 45, null, null],
    [74, null, 45, null, null],
    [74, null, 0, null, null],
    [62, null, null, 0, null],
    [62, null, null, 51, null],
    [91, null, null, 51, null],
    [91, null, null, 0, null],
    [87, null, null, null, 0],
    [87, null, null, null, 44],
    [116, null, null, null, 44],
    [116, null, null, null, 0],
  ]);

  var view = new google.visualization.DataView(data);
  var viewColumns = [];
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    viewColumns.push(i);
    if (i > 0) {
      viewColumns.push(getStyle(i - 1, (i === 3) ? '#707b7c' : false));
    }
  }
  view.setColumns(viewColumns);

  function getStyle(series, strokeColor) {
    return {
      role: 'style',
      type: 'string',
      calc: function (dt, row) {
        var pointStyle;

        switch (row) {
          case (series * 4):
            pointStyle = 'point {fill-color: #ffffff; stroke-color: #229954; stroke-width: 3;}';
            break;

          case ((series * 4) + 3):
            pointStyle = 'point {fill-color: #ffffff; stroke-color: #cb4335; stroke-width: 3;}';
            break;

          default:
            pointStyle = 'point {opacity: 0;}';
        }
        if (strokeColor) {
           pointStyle += ' line {color: ' + strokeColor + '}';
        }
        return pointStyle;
      }
    };
  }

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(view, {
    colors: ['#f39c12', '#f39c12', '#d35400', '#f39c12'],
    hAxis: {
      viewWindow: {
        min: 0,
        max: 120
      }
    },
    legend: {
      position: 'none'
    },
    pointSize: 6
  });
}

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