向堆叠的水平条形图添加垂直线答案

【问题标题】：Add vertical line to stacked horizontal bar chart向堆叠的水平条形图添加垂直线
【发布时间】：2016-10-02 20:21:18
【问题描述】：

我想做this question 中描述的同样的事情，除了我想为水平条形图做这件事（条形图是水平的而不是垂直的）。我将在此处复制该问题中的图像：

我想要一个与此类似的带有垂直线的堆叠水平条形图。

ComboCharts 似乎不支持水平条形图，所以我希望可能有其他方法。

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

使用orientation: 'vertical' 将旋转轴，使柱形图变为条形图

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

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ComboChart(container);

    var data = google.visualization.arrayToDataTable([
      ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', 'Minimum', 'Maximum'],
      ['2010', 10, 24, 20, 32, 18, 5, 90, 140],
      ['2020', 16, 22, 23, 30, 16, 9, 90, 140],
      ['2030', 28, 19, 29, 30, 12, 13, 90, 140]
    ]);

    var options = {
      bar: {
        groupWidth: '75%'
      },
      height: 400,
      isStacked: true,
      legend: {
        position: 'bottom'
      },
      orientation: 'vertical',
      series: {
        6: {
          color: '#000000',
          type: 'line'
        },
        7: {
          color: '#000000',
          type: 'line'
        }
      },
      seriesType: 'bars',
      width: 600,
    };

    chart.draw(data, options);
  },
  packages: ['corechart']
});

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

【讨论】：

谢谢，我可以将其与链接问题中的答案结合起来以获得全宽线。