如何为三组数据创建堆积条形图？答案

【问题标题】：How to create a stacked bar chart for three sets of data?如何为三组数据创建堆积条形图？
【发布时间】：2016-10-14 18:14:14
【问题描述】：

我正在使用 Google 图表来可视化一些指标，但我遇到了一些障碍。现在我有一个看起来像这样的条形图（下面的代码）而它背后的代码是

Javascript

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['bar', 'corechart'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3'],
            ['Chicago', 400, 500, 1000],
            ['New York', 400, 500, 1000],
            ['Seattle', 400, 500, 1000],
            ['Average', 400, 500, 1000]
        ]);

        var options = {
            chart: {
                //title: 'Sales Order Performance',
                //subtitle: 'Sales, Expenses, and Profit: 2014-2017',
            },
            bars: 'horizontal', // Required for Material Bar Charts.
            hAxis: { format: 'decimal' },
            height: 400,
            colors: ['#1b9e77', '#d95f02', '#7570b3']
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));

        chart.draw(data, google.charts.Bar.convertOptions(options));

        var btns = document.getElementById('btn-group');

        btns.onclick = function (e) {

            if (e.target.tagName === 'BUTTON') {
                options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
                chart.draw(data, google.charts.Bar.convertOptions(options));
            }
        }
    }
</script>

html

<body>
    <div id="chart_div"></div>
</body>

从一些类似的答案中，我得到的最接近的是修改一些已经发布的小提琴，但似乎没有什么能完全符合我的需要。我正在尝试将我提供的图表与堆积条形图结合起来（如 here 所演示和解释的那样，但我在 Google 或 Stack Overflow 上看到的所有一次性小技巧并没有让我得到我需要的东西.

我本质上希望“DataSet 3”栏能够分解成与此类似的栏

如何将已有的图表转换为每个数据点有 3 个条形的堆叠条形图？如果不能做到这一点，我能做的最接近的结果是什么？

编辑：忘记添加我之前提到的小提琴。这已经接近我需要http://jsfiddle.net/qv325979/126/ 的最终结果，但它仍然不太正确，我开始使用的示例必须进行大量修改才能达到这一点。我基本上是想把它放到有 3 个条（而不是 2 个）的位置，并且每个项目的顶部 2 个条有 1 个数据点，底部条可以分成 5 个左右。

我不完全理解如何分解这些条，以及为什么该小提琴中的顶部条有 5 个单独的段，而红色条只有 1 个，所以如果有更多知识的人可以解释为什么这也将不胜感激。

【问题讨论】：

在小提琴中，设置series.5 选项，从堆栈中断开最后一列...
谢谢@WhiteHat，那么在我有 2 个只有 1 个段的条形图，然后是 5 个左右的第 3 个条形图的情况下，实现预期结果的方法是什么？

标签： javascript charts asp.net-core google-visualization

【解决方案1】：

到有 2 条只有 1 段，然后是第 3 条，有 5 条左右...

在前两个系列上使用series 选项来隔离每个条

使用hAxes 选项隐藏附加轴的标签

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

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
      ['Chicago', 400, 500, 200, 200, 200, 200, 200],
      ['New York', 400, 500, 200, 200, 200, 200, 200],
      ['Seattle', 400, 500, 200, 200, 200, 200, 200],
      ['Average', 400, 500, 200, 200, 200, 200, 200]
    ]);

    var options = {
      hAxes: {
        1: {
          textStyle: {
            color: 'transparent'
          }
        },
        2: {
          textStyle: {
            color: 'transparent'
          }
        }
      },
      bars: 'horizontal',
      colors: ['#1b9e77', '#d95f02', '#7570b3'],
      hAxis: {
        format: 'decimal'
      },
      height: 400,
      isStacked: true,
      series: {
        0: {
          targetAxisIndex: 1
        },
        1: {
          targetAxisIndex: 2
        }
      }
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  },
  packages: ['bar']
});

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

编辑

使用核心图表是另一种选择，
以下配置选项将使图表接近与材质的外观和感觉

theme: 'material'

但是，core 图表与 material 的分组不同

因此必须在数据中手动创建组，
包括行间距

也不会自动调整最后的颜色

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

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
      [' ', 400, null, null, null, null, null, null],
      ['Chicago', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['New York', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['Seattle', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['Average', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
    ]);

    var options = {
      colors: ['#1b9e77', '#d95f02', '#4a148c', '#7b1fa2', '#9c27b0', '#ba68c8', '#e1bee7'],
      bar: {
        groupWidth: '90%'
      },
      hAxis: {
        format: 'decimal'
      },
      height: 400,
      isStacked: true,
      theme: 'material'
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

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

【讨论】：

我注意到在您的示例中，尽管只有 400、500 等值，但条形一直到最后。在您的 sn-p 中，DataSet 2 并没有一直走，但是当我在本地运行它时，所有 3 个小节都会一直运行到最后。桌子的设置方式有问题吗？您设置功能的方式与我设置功能的方式之间也有区别吗？例如，您的似乎是在实际的图表加载中，而我的是在加载图表后完成的。
我通常在load 语句中包含callback -- 与setOnLoadCallback 相同 -- 至于值一直保持 -- 没有注意到起初，但这是由于多轴'-删除color: 'transparent'的选项，这将是有意义的-有三行x轴标签-每个可能以不同的值结尾-使用核心图表与材料将允许更灵活地处理此类问题——因为there are many options that simply don't work on material charts...
好吧，我在想，因为 core 提供了更多选项，所以操作起来会更容易——但由于图表之间的分组差异，更多core 需要操作——但至少轴比例是正确的。 -- 但检查 extra 城市行上的工具提示 -- 城市不显示，空间显示 (' ') -- 如果需要，我有自定义工具提示的代码...
我更喜欢使用 core，因为很多选项都不适用于 material，无论如何，我发现使用时需要进行很多操作一般来说，谷歌图表，所以并不少见——另外，不要如何使用 material 获得正确的轴比例，至于排序和其他操作，保留原件的副本——然后写之后将数据提供给图表的算法......
好问题！您可以通过包含城市名称而不是空格 (' ') 来解决过滤器问题——要隐藏多余的标签，可以在绘制 'ready' 事件后修改图表，找到标签通过 svg "dom"，将颜色更改为 'transparent' -- 也可以提供帮助...