谷歌条形图分组和堆叠

Question

您会在下面找到我的分组和堆叠条形图，到目前为止效果很好。但是如何添加分组值的信息。

如果我滚动每个块，我会得到这个块的值，但我需要块的累积。

示例：块 1：1.000 块 2：1.500 块 3：1.000 块 4：2.000

如果我翻转第三个块，则该值必须是 3.500。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>   
<script type="text/javascript">

  google.load('visualization', '1.1', {'packages': ['bar']});

google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', 'level 1');
    data.addColumn('number', 'level 2');
    data.addColumn('number', 'level 3');
    data.addColumn('number', 'level 4'); 
    data.addColumn('number', 'current value');    
    data.addRows([
        ['Team1',  {!Team1_l1}, {!Team1_l2}, {!Team1_l3}, {!Team1_l4}, {!Team1_cv}],
        ['Team2',  {!Team2_l1}, {!Team2_l2}, {!Team2_l3}, {!Team2_l4}, {!Team2_cv}],
    ]);

    var options = {
        isStacked: true,
        width: 890,
        height: 500,
        backgroundColor: '#F8F8F8',

        chartArea: { backgroundColor: '#F8F8F8' },

        chart: {
            subtitle: 'current view of the incentive'
        },        
        vAxis: {
            format: 'decimal',
            viewWindow: {
                min: 0,
                max: 30000000
            }
        },       
        series: {
            4: { targetAxisIndex: 1 }, 
            5: { targetAxisIndex: 1 }
        }
    };
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
}

</script>

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

Answer 1

更改工具提示的唯一方法是使用tooltip column role 提供自定义工具提示

但是，材料图表不支持列角色 (along with many other options)
google.charts.Bar --- packages: ['bar']

使用经典图表是唯一的选择...
google.visualization.ColumnChart --- packages: ['corechart']

---

要聚合每个堆栈的值，请提供自定义工具提示
使用DataView 和setColumns() 方法为工具提示动态添加列

要使用自定义 html 工具提示，必须设置属性 --> html: true -- 在列上，
并设置图表选项 --> tooltip: {isHtml: true}

DataView 有一个小错误，它不尊重列属性
必须在绘图前转换回DataTable --> dataView.toDataTable()

---

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', '');
  data.addColumn('number', 'level 1');
  data.addColumn('number', 'level 2');
  data.addColumn('number', 'level 3');
  data.addColumn('number', 'level 4');
  data.addColumn('number', 'current value');
  data.addRows([
    ['Team1',  1000, 1500, 1000, 2000, 1800],
    ['Team2',  2000, 2500, 2000, 3000, 2800]
  ]);

  var options = {
    isStacked: true,
    width: 890,
    height: 500,
    backgroundColor: '#F8F8F8',
    chartArea: {
      backgroundColor: '#F8F8F8'
    },
    chart: {
      subtitle: 'current view of the incentive'
    },
    colors: ['#2196f3', '#42a5f5', '#64b5f6', '#90caf9', '#bbdefb'],
    tooltip: {
      isHtml: true
    },
    vAxis: {
      format: 'decimal',
      viewWindow: {
        min: 0,
        max: 15000
      }
    }
  };

  // number formatter
  var formatNumber = new google.visualization.NumberFormat({
    pattern: options.vAxis.format
  });

  // build data view columns
  var viewColumns = [];
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    addColumn(col);
  }
  function addColumn(col) {
    // add data table column
    viewColumns.push(col);

    // add tooltip column
    if ((col > 0) && (col < (data.getNumberOfColumns() - 1))) {
      viewColumns.push({
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
          // calculate aggregate
          var aggregateValue = 0;
          for (var aggCol = 1; aggCol <= col; aggCol++) {
            aggregateValue += dt.getValue(row, aggCol);
          }

          // build custom tooltip
          var tooltip = '<div class="ggl-tooltip"><div><span>';
          tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
          tooltip += '<div>' + dt.getColumnLabel(col) + ':&nbsp;';
          tooltip += '<span>' + formatNumber.formatValue(aggregateValue) + '</span></div></div>';

          return tooltip;
        },
        p: {html: true}
      });
    }
  }
  var dataView = new google.visualization.DataView(data);
  dataView.setColumns(viewColumns);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  // use data view to draw chart
  chart.draw(dataView.toDataTable(), options);
});

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-family: Arial, Helvetica;
  font-size: 14px;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.ggl-tooltip span {
  font-weight: bold;
}

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

---

注意： jsapi 不应再用于加载图表库，
根据发行说明...

通过jsapi 加载程序仍然可用的 Google Charts 版本不再持续更新。出于安全目的，最后一次更新是 v45 的预发布版本。从现在开始请使用新的 gstatic loader.js。

这只会改变load语句，见上面的sn-p...