我如何根据从外部值数组传递的数据设置项目符号的颜色？

Question

i在一张图中有两种类型的数据-正常范围（条形图）和值（带有项目符号的线）。如果该值大于或小于该范围，则项目符号的颜色必须为红色，这表示该值不正常。如何在图形中传递预先计算的颜色或通过适配器函数进行计算或任何其他工作方式？image example

let data = [
  {
      code: "07090",    
      name: "Sodium",    
      result: 150,
      unit: "mmol/L",
      refMin: 137,
      refMax: 149,
      date: "2019-10-04"
  },
  {
      code: "07090",    
      name: "Sodium",    
      result: 139,
      unit: "mmol/L",
      refMin: 135,
      refMax: 147,
      date: "2019-10-06"
  },
  {
      code: "07090",    
      name: "Sodium",    
      result: 130,
      unit: "mmol/L",
      refMin: 135,
      refMax: 147,
      date: "2019-10-07"
  },
  {
      code: "07090",    
      name: "Sodium",    
      result: 140,
      unit: "mmol/L",
      refMin: 135,
      refMax: 147,
      date: "2019-11-07"
  },
  {
      code: "07090",    
      name: "Sodium",    
      result: 147,
      unit: "mmol/L",
      refMin: 135,
      refMax: 147,
      date: "2019-11-08"
  },
  {
      code: "07090",    
      name: "Sodium",    
      result: 147,
      unit: "mmol/L",
      refMin: 134,
      refMax: 146,
      date: "2019-11-10"
  },
  {
      code: "07090",    
      name: "Sodium",    
      result: 147,
      unit: "mmol/L",
      refMin: 134,
      refMax: 146,
      date: "2020-11-10"
  },
  {
      code: "07090",    
      name: "Sodium",    
      result: 147,
      unit: "mmol/L",
      refMin: 134,
      refMax: 146,
      date: "2020-11-11"
  }

];

let cols = [];
let lines = [];
let chartData = [];

for(let { result, refMin, refMax, date } of data) {
  let markerColor = "#fff"; // !!!! the color is predefined here 
  if (result > refMax || result < refMin) {
    markerColor = "#f00";
  }

  chartData.push({
    date: new Date(date),
    result: result,
    colMin: refMin,
    colMax: refMax,
    markerColor
  });
}

am4core.ready(function() {

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

// Create chart instance
var chart = am4core.create("chartContainer", am4charts.XYChart);
chart.responsive.enabled = true;

// Add data
chart.data = chartData;

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

var seriesCols = chart.series.push(new am4charts.ColumnSeries());
seriesCols.dataFields.dateX  = "date";
seriesCols.dataFields.valueY  = "colMax";
seriesCols.dataFields.openValueY = "colMin";
seriesCols.fill = am4core.color("#ccc");
seriesCols.strokeWidth = 0;
seriesCols.name = "Range";
seriesCols.tooltipText = "{colMin} - {colMax}";
seriesCols.tooltip.pointerOrientation = "horizontal";
seriesCols.tooltip.background.cornerRadius = 0;
seriesCols.tooltip.background.fillOpacity = 0.5;
seriesCols.tooltip.label.padding(10,10,7,10);

// Create series
var series = chart.series.push(new am4charts.LineSeries());
let circleBullet = series.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = "#fff";
circleBullet.circle.fillOpacity = ".7";
circleBullet.circle.strokeWidth = 1;

series.dataFields.valueY = "result";
series.dataFields.dateX = "date";
series.dataFields.dummyData = "date";
series.strokeWidth = 2;
series.minBulletDistance = 30;
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.cornerRadius = 20;
series.tooltip.background.fillOpacity = 0.5;
series.tooltip.label.padding(12,12,12,12);
series.dummyData = { color: "markerColor" };

series.adapter.add("fill", function(fill, lalal) {
  return fill;
});

// Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);

// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;

}); 

Answer 1

已解决：

circleBullet.propertyFields.fill = "bulletColor";