AM4Charts 使属性字段无效

Question

我正在尝试创建一个柱形图，其中的列显示某些任务的完成百分比。数据每三十秒更新一次。我想让它在作业完成 0-50% 时完成，否则该列是绿色的。

series.columns.template.adapter.add('stroke', (stroke, target) =>
{
    let returnValue;
    if (target.dummyData.level < 50)
        returnValue = "#f26969";
    else 
        returnValue = '#9d4062';
    return am4core.color(returnValue);
})

其中级别是通过以下方式分配给属性字段的称为细分的变量的一部分：

                seriesCanisterLevels.tooltip.propertyFields.dummyData = "breakdown";

此代码在第一次运行时（即第一次渲染图形时）运行良好。如果我设置初始值 > 或

经过调查发现，propertyField 中的更改以及随后的 chart.invalidateRawData() 不会导致适配器再次触发。是否有解决方法（我不想调用 chart.invalidateData，因为我不想重新渲染整个图表，尽管这确实有效）

Answer 1

除非您直接使图表和/或关联元素无效（如您所见），或者与适配器关联的属性已更改，否则适配器不会重新触发。您可以通过循环遍历系列列来模仿后者，并在更新数据后将笔划分配给自身：

  series.columns.each(function(column) {
    column.stroke = column.stroke;
  })

下面的演示：

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "category": "0",
  "value": 50,
  "breakdown": {
    "level": 50
  }
}];

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.disabled = true;
categoryAxis.renderer.grid.template.disabled = true;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = 0;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "value";
series.dataFields.categoryY = "category";
series.columns.template.tooltipText = "Text: [bold]{dummyData.level}[/]";
series.columns.template.height = am4core.percent(100);
series.columns.template.strokeWidth = 10;
series.sequencedInterpolation = true;
series.columns.template.propertyFields.dummyData = "breakdown";
series.tooltip.propertyFields.dummyData = "breakdown";
series.columns.template.adapter.add('stroke', (stroke, target) => {
  let returnValue;
  if (target.dummyData.level < 50) {
    returnValue = "#f26969";
  } else {
    returnValue = '#9d4062';
  }
  return am4core.color(returnValue);
});

setInterval(function() {
  var value = Math.floor(Math.random() * 100);
  chart.data[0].value = value;
  chart.data[0].breakdown.level = value;
  chart.invalidateRawData();
  series.columns.each(function(column) {
    column.stroke = column.stroke;
  })
}, 2000)

#chartdiv {
  width: 100%;
  height: 200px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>