是否可以在不增加序列的情况下使用堆积的柱形图？

Question

首先，我不确定要查找的内容是否称为堆积柱形图。

Lib是Google图表或amCharts。

我在过去28天内具有一系列值，分别代表已发送的电子邮件，打开的电子邮件和带有链接的电子邮件。对于每个日期，该列的最高值应该是发送的电子邮件数。然后根据其他两个值对该列进行划分。基本上，该图表应显示的是，从发送的20封邮件中，打开了17封邮件，还有5封邮件甚至使人们单击其中的链接。使用常规的堆叠色谱柱方法并使用数字20、17和5，这将使色谱柱在42处达到峰值，其中一个区域覆盖0-20，一个20-37和一个37-42。我想要的是在20处达到峰值的列，在它前面的是在17处达到峰值的列，在其前面的5处达到峰值。类似于差异图。

从理论上讲，我可以通过点击5封邮件来修改我的数据来实现这一点，打开的邮件为17减去5 = 12，发送的邮件为20减去17 =3。然后5 + 12 + 3 = 20我想要的。但是，将鼠标悬停在堆积的列上将在工具提示中显示错误的值5、12和3，而不是5、17和20。因此，我将不得不呈现自定义工具提示。

你们有没有办法解决我的问题？

Answer 1

对于您理论上描述的情况，您不需要自定义工具提示。

加载Google数据表时，我们可以使用对象符号。我们可以提供值（v:）和格式化的值（f:）

{v: 12, f: '17'}

默认情况下，工具提示将使用格式化的值。

此外，您可以使用DataView进行计算。这将允许您正常加载数据。

此处，计算列用于调整绘制的值，但显示原始值。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // create data table
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Emails with Clicks');
  data.addColumn('number', 'Emails Opened');
  data.addColumn('number', 'Emails Sent');

  // add data
  data.addRow(['06/2020', 5, 17, 20]);

  // create number format
  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0'
  });

  // create data view
  var view = new google.visualization.DataView(data);

  // build view columns
  var viewColumns = [0];
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    addColumn(i);
  }
  function addColumn(index) {
    viewColumns.push({
      calc: function (dt, row) {
        var currentColumnValue = dt.getValue(row, index);
        var previousColumnValue = 0;
        if (index > 1) {
          previousColumnValue = dt.getValue(row, index - 1);
        }
        var adjusttedColumnValue = currentColumnValue - previousColumnValue;
        var formattedColumnValue = formatNumber.formatValue(currentColumnValue);
        return {
          v: adjusttedColumnValue,
          f: formattedColumnValue
        };
      },
      label: data.getColumnLabel(index),
      type: data.getColumnType(index),
    });
  }

  // set view columns
  view.setColumns(viewColumns);

  // create options
  var options = {
    chartArea: {
      left: 64,
      top: 40,
      right: 32,
      bottom: 40,
      height: '100%',
      width: '100%'
    },
    height: '100%',
    isStacked: true,
    legend: {
      alignment: 'end',
      position: 'top'
    },
    width: '100%'
  };

  // create, draw chart with view
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
  window.addEventListener('resize', function () {
    chart.draw(view, options);
  });
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

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

---

注意：如果您要堆叠一列在另一列之前的列，类似于Diff Chart，检查此答案...

Google Chart - More then 1 difference column