动态复选框切换以堆叠/取消堆叠 AMCharts 4 XY columnseries / bar chart

Question

我在我的 XY 列系列图表中单独放置了一个复选框。原始图表每个 series.stacked = true。这很好用。我在复选框上有一个侦听器，用于从堆叠列切换到独立列。它在每个系列上设置（切换）相同的堆叠属性。不幸的是没有更新。我曾尝试在属性赋值后在图表上调用 invalidateData() - 但这也无法更新堆叠/取消堆叠功能。

    $("#chartAssetsTimelineIndividualColumns").change(function () {

        chartAssetsTimeline.series.values.forEach(function (series) {

            series.stacked = !this.checked;
        });
    });

Answer 1

当您在 forEach 方法中时，

this 不引用输入元素，因为此时它的范围限定为 window 对象。您需要保存对它的引用并使用它，或者只使用 change 方法提供的事件对象。此外，您应该使用 each 函数而不是遍历只读 values 数组。

$('#chartAssetsTimelineIndividualColumns').change(function() {
  var that = this;
  chartAssetsTimelineIndividualColumns.series.each(function(series) {
    series.stacked = !that.checked;
  });
});

// or
$('#chartAssetsTimelineIndividualColumns').change(function(e) {
  chartAssetsTimelineIndividualColumns.series.each(function(series) {
    series.stacked = !e.target.checked;
  });
});    

// or, preferably, with VanillaJS:
document.getElementById('chartAssetsTimelineIndividualColumns').addEventListener('change', function(e) {
  chartAssetsTimelineIndividualColumns.series.each(function(series) {
    series.stacked = !e.target.checked;
  });
});

动态复选框切换以堆叠/取消堆叠 AMCharts 4 XY columnseries / bar chart

Dynamic checkbox toggle to stack / unstack AMCharts 4 XY columnseries / bar chart

amcharts