Question

你会发现我的分组和堆叠条形图，这个工作到目前为止还不错。但是如何添加分组值的信息。

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

示例：Block1：1.000 Block2：1.500 Block3：1.000 Block4：2.000

如果我滚动第三个块，则值必须为3.500。

{{1}}

Answer 1

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

提供自定义工具提示

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

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

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

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

DataView存在一个小错误，它不尊重列属性在绘制之前必须转换回DataTable - ＆gt; dataView.toDataTable()

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

通过jsapi加载程序保留的Google图表版本不再一致更新。出于安全考虑，最后一次更新是预先发布的v45。请从现在开始使用新的gstatic loader.js。

这只会更改load语句，请参阅上面的代码段...

谷歌条形图分组和堆叠

1 个答案: