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

Question

首先，我不确定我要找的是堆积柱形图还是其他。

库是 Google Charts 或 amCharts。

我有一系列过去 28 天的值，代表发送的电子邮件、打开的电子邮件和点击链接的电子邮件。对于每个日期，该列的最大值。值应该是发送的电子邮件数。然后根据其他两个值划分此列。基本上图表应该显示的是，在发送的 20 封邮件中，有 17 封被打开，5 封甚至有人点击了邮件中的链接。使用常规的堆叠柱方法和数字 20、17 和 5，这将使柱达到 42 的峰值，其中一个部分涵盖 0-20、一个 20-37 和一个 37-42。我想要的是一个峰值为 20 的列，在它前面的列峰值为 17，前面的列峰值为 5。类似于 diff 图表。

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

你们知道我的问题是否有简单的解决方案吗？

Answer 1

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

加载google数据时table，我们可以使用对象表示法。
我们可以提供值 (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>

注意：如果你想堆叠列，一个在另一个前面，类似于差异图表，
检查这个答案...

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

Is it possible to use stacked column chart without the series adding up?

charts

google-visualization

amcharts

amcharts4