在Amcharts4中，range.contents.fill与Lineseries.propertiesField.fill

如何解决在Amcharts4中，range.contents.fill与Lineseries.propertiesField.fill

在Amcharts4折线图中，图表填充颜色来自2个不同的地方。 Lineseries.propertyFields.fill和range.contents.fill。

我从Ajax调用中获得Lineseries.propertyFields.fill使用的彩色十六进制值。

部分后端代码：

if (temps == "2020-08-11T07:15:00.000Z") {Color = "#5476ff"};
    JSlist.add(["value":prod,"date":temps,"lineColor":Color]);
    writeJSON("myJSONAnswer": JSlist);

然后，我使用series.propertyFields.fill = "lineColor";为图形的特定区域着色。 效果很好。

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";

尽管我也想使用range.contents.fill = am4core.color("#808080");

为图表的其他范围着色

var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-08-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fill = am4core.color("#808080");
range.contents.fillOpacity = 0.6;
//https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/#Using_with_series

如果我评论这三行，我可以看到彩色范围。否则它会被它覆盖。

series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";

我希望range.contents.fill = am4core.color("#808080");覆盖series.propertyFields.stroke = "lineColor";

我该怎么做？

解决方法

我尝试实现您的Amcharts代码，尽管我必须将range.contents.fillOpacity的值更改为1，以便使其引人注目，但它似乎能够很好地显示该范围。

尝试运行该代码段，看看这是否是您想要的。

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

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

var data = [];
var value = 50;
for(var i = 0; i < 300; i++){
  var date = new Date();
  date.setHours(0,0);
  date.setDate(i);
  value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
  data.push({date:date,value: value,lineColor: "#5476ff"});
}

chart.data = data;

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

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

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";

var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-10-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fill = am4core.color("#808080");
range.contents.fillOpacity = 1;

series.tooltip.pointerOrientation = "vertical";

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

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

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

编辑：您可以通过创建“就绪”事件侦听器并在绘制图表后替换propertyFields颜色来覆盖系列的range.content属性。

var chart = am4core.create("chartdiv",lineColor: "#5476ff",rangeColor: "#000000"});
}

chart.data = data;

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

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

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";

var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-10-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fillOpacity = 1;

series.tooltip.pointerOrientation = "vertical";

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

//Event listener to replace the content color after chart has been rendered,thus overriding propertyFields
chart.events.on("ready",() =>{
    range.contents.children.values.forEach(item => {
      item.stroke = am4core.color("#808080");
      item.fill = am4core.color("#808080");
    });
});

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

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