Question

我正在使用谷歌图表来显示一些指标，我遇到了一些障碍。现在我有一个如下所示的条形图（下面的代码）它背后的代码是

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

从一些类似的答案中得出，我得到的最接近的是修改了一些已经发布的小提琴，但似乎没有什么工作可以解决我需要它的方式。我试图将我提供的图表与Stacked Bar Graph结合起来（如演示和解释here但是我在谷歌或Stack Overflow上看到的所有小小的一次性黑客都没有得到什么我需要。

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

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

编辑：忘了添加我前面提到的小提琴。这就像我得到的最终结果一样接近http://jsfiddle.net/qv325979/126/，但它仍然不太正确，我开始使用的例子必须经过大量修改才能达到这一点。我基本上试图将它带到3个柱（而不是2个）的位置，并且每个项的前2个条有1个数据点，底部条可以分成5个左右。

我不完全明白如何打破酒吧以及为什么那个小提琴中的顶栏有5个单独的片段，而红色栏只有1个，所以如果有更多知识渊博的人可以解释为什么这也会非常感激。< / p>

Answer 1

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

使用前两个系列中的series选项来隔离每个栏

使用hAxes选项隐藏附加轴＆＃39;标签

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

＆＃13;

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

＆＃13;

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

＆＃13;

编辑

使用核心图表是另一种选择，
以下配置选项将图表关闭设置为外观＆amp;感觉材料

theme: 'material'

但是，核心图表不会与材料

分组相同

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

也不会自动调整最后一种颜色

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: