javascript - 在 Amcharts4 range.contents.fill 不适用于 Lineseries.propertiesField.fill

Question

在 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

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

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

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

我怎样才能做到这一点？

标签： javascriptamchartsamcharts4

Answer 1

我尝试实现您的 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,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", am4charts.XYChart);

var data = [];
var value = 50;
for(var i = 0; i < 300; i++){
  var date = new Date();
  date.setHours(0,0,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", 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>