Javascript 在Amcharts4 range.contents.fill中'；不能使用Lineseries.propertiesField.fill

在Amcharts4折线图中，图表填充颜色来自两个不同的位置。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”）；为图形的其他区域着色

如果我对这3行进行注释，我可以看到颜色范围。否则它会被它覆盖

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
，以使其引人注目

试着运行代码段，看看这是否是您想要的


//主题开始
am4core.useTheme（am4themes_动画）；
//主题结束
var chart=am4core.create（“chartdiv”，am4charts.XYChart）；
var数据=[]；
var值=50；
对于（变量i=0；i<300；i++）{
变量日期=新日期（）；
设定时间（0,0,0,0）；
日期。设定日期（i）；
值-=数学四舍五入（（数学随机（）<0.5？1:-1）*数学随机（）*10）；
push（{date:date，value:value，lineColor:“#5476ff”}）；
}
chart.data=数据；
//创建轴
var dateAxis=chart.xAxes.push（新的am4charts.dateAxis（））；
dateAxis.renderer.minGridDistance=60；
var valueAxis=chart.yAxes.push（新的am4charts.valueAxis（））；
//创建系列
var series=chart.series.push（新的am4charts.LineSeries（））；
series.dataFields.valueY=“value”；
series.dataFields.dateX=“日期”；
series.tooltipText=“{value}”
series.fillOpacity=0.5；
series.propertyFields.stroke=“lineColor”；
series.propertyFields.fill=“lineColor”；
变量范围=dateAxis.createSeriesRange（系列）；
range.date=新日期（“2020-08-11T09:00:00.000Z”）；
range.endDate=新日期（“2020-10-11T09:30:00.000Z”）；
range.contents.stroke=am4core.color（“#808080”）；
range.contents.fill=am4core.color（“#808080”）；
range.contents.fillOpacity=1；
series.tooltip.pointerooritation=“垂直”；
chart.cursor=新的am4charts.XYCursor（）；
chart.cursor.snapToSeries=系列；
chart.cursor.xAxis=日期轴
#chartdiv{
宽度：100%；
高度：500px；
}

谢谢你的回答！这证明我们可以使用“范围”来覆盖fill.opacity，但不能覆盖acutal fill color，#808080为灰色。我们仍然使用不透明度为1而不是0.5的series.propertyFields.fill=“lineColor”。可能是个不错的解决办法。如果我能改变实际的颜色就更好了。糟糕的是，我没有注意到#808080是灰色的，谢谢你指出这一点。对此做了一些额外的研究，发现发生这种情况的原因是
propertyFields
被最后渲染，因此任何设置此项的操作都将覆盖其他状态。这也解释了为什么
fillOpacity
可以工作，因为它直接设置为一个系列状态，而不是
propertyFields
ok，谢谢。除了调整不透明度之外，您还可以考虑其他解决方法？您可以添加一个事件侦听器，以便在“就绪”事件（在图表渲染后）触发，并迭代range.content子元素以替换颜色。我已经用新的解决方法更新了答案。
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";