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);
})

其中 level 是通过以下方式分配给属性字段的名为 breakdown 的变量的一部分：

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

此代码在第一次运行时运行良好（即首次呈现图形时）。如果我将初始值设置为 > 或 < 50，我会得到我期望的行为。然而，在那之后，由于数据每 30 秒动态更改一次，它不会更改颜色（尽管列的长度会更改）。

经过一些调查，事实证明，属性Field 中的更改以及随后的 chart.invalidateRawData() 不会导致适配器再次触发。有没有解决这个问题的方法（我不想调用 chart.invalidateData 因为我不想重新渲染整个图形，尽管这确实有效）

Answer 1

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

  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>

AM4Charts 使属性个字段无效

AM4Charts Invalidate Property Fields

angular

amcharts

amcharts4

AM4Charts 使 属性 个字段无效

AM4Charts Invalidate Property Fields

angular

amcharts

amcharts4

AM4Charts 使属性个字段无效