AmCharts 堆叠问题答案

【问题标题】：AmCharts stacking issueAmCharts 堆叠问题
【发布时间】：2021-08-07 02:59:28
【问题描述】：

由于某种原因 value_2 在 2:00 覆盖了 value_1 如果隐藏 value_2 图例，则可以看到 value_1 列。

如何自动堆叠它们并显示两者的工具提示？如果我交换数据顺序，工具提示会在 2:00 显示两个值，但 value_2 仍然覆盖 value_1。

请帮忙

am4core.ready(function() {

var chart = am4core.create("chartdiv", am4charts.XYChart);
  
  chart.scrollbarX = new am4charts.XYChartScrollbar();

  chart.cursor = new am4charts.XYCursor();
  chart.cursor.xAxis = dateAxis;

  chart.legend = new am4charts.Legend();
  function createSeries(field, color) {
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = field;
    series.dataFields.dateX = "date";
    series.strokeWidth = 0;

    series.fill = am4core.color(color);
    series.clustered = false;
    series.minBulletDistance = -1;

    series.name = field;
    series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
    series.stacked = true;

    chart.scrollbarX.series.push(series);

    return series;
  }

// Create axes
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.min = 0;

  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.minGridDistance = 50;
  dateAxis.baseInterval = {
    "timeUnit": 'hour',
    "count": 1
  };

  createSeries('value_1', '#646464');
  createSeries('value_2', '#333333');
  
  chart.data = [
    {
      "date": new Date(2021, 5, 4, 1),
      "value_1": 2
    },
    {
      "date": new Date(2021, 5, 4, 2),
      "value_1": 2,
    },
    {
      "date": new Date(2021, 5, 4, 2),
      "value_2": 9,
    },
  ];

}); // end am4core.ready()

codepen example

【问题讨论】：

标签： javascript charts amcharts

【解决方案1】：

您的数据需要按日期分组；将它们作为单独的元素分开会导致视觉故障，就像在您的代码笔中一样。

  chart.data = [
    {
      date: new Date(2021, 5, 4, 1),
      value_1: 2
    },
    {
      date: new Date(2021, 5, 4, 2),
      value_1: 2,
      value_2: 9
    }
  ];

【讨论】：