amCharts：如何绘制具有数据间隙的正确平滑线

Question

在绘制带有数据间隙的平滑线时，我看到了渲染器的这种不正确行为。这只发生在平滑线，即设置 series.tensionX = 0.77 时。如果 tensionX 设置为 1 则线条绘制正确。

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

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

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

// Add data
chart.data = [{"date":"2020-02-28","value":2.7777777777777777},{"date":"2020-02-29","value":4.861111111111112},{"date":"2020-03-01","value":4.861111111111112},{"date":"2020-03-02","value":4.861111111111112},{"date":"2020-03-03","value":4.861111111111112},{"date":"2020-03-04","value":3.4722222222222223},{"date":"2020-03-05","value":3.4722222222222223},{"date":"2020-03-06","value":6.25},{"date":"2020-03-07","value":3.4722222222222223},{"date":"2020-03-08","value":null},{"date":"2020-03-09","value":null},{"date":"2020-03-10","value":null},{"date":"2020-03-11","value":null},{"date":"2020-03-12","value":null},{"date":"2020-03-13","value":null},{"date":"2020-03-14","value":null},{"date":"2020-03-15","value":null},{"date":"2020-03-16","value":null},{"date":"2020-03-17","value":null},{"date":"2020-03-18","value":null},{"date":"2020-03-19","value":null},{"date":"2020-03-20","value":null},{"date":"2020-03-21","value":null},{"date":"2020-03-22","value":null},{"date":"2020-03-23","value":null},{"date":"2020-03-24","value":null},{"date":"2020-03-25","value":null},{"date":"2020-03-26","value":null},{"date":"2020-03-27","value":null},{"date":"2020-03-28","value":null},{"date":"2020-03-29","value":null},{"date":"2020-03-30","value":null},{"date":"2020-03-31","value":null},{"date":"2020-04-01","value":null},{"date":"2020-04-02","value":null},{"date":"2020-04-03","value":null},{"date":"2020-04-04","value":null},{"date":"2020-04-05","value":null},{"date":"2020-04-06","value":null},{"date":"2020-04-07","value":null},{"date":"2020-04-08","value":null},{"date":"2020-04-09","value":null},{"date":"2020-04-10","value":null},{"date":"2020-04-11","value":null},{"date":"2020-04-12","value":null},{"date":"2020-04-13","value":null},{"date":"2020-04-14","value":null},{"date":"2020-04-15","value":null},{"date":"2020-04-16","value":null},{"date":"2020-04-17","value":null},{"date":"2020-04-18","value":null},{"date":"2020-04-19","value":null},{"date":"2020-04-20","value":2.7777777777777777},{"date":"2020-04-21","value":2.7777777777777777},{"date":"2020-04-22","value":2.7777777777777777}]

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "date";
categoryAxis.renderer.minGridDistance = 50;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.renderer.labels.template.rotation = -45;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.labels.template.verticalCenter = "middle";
categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.baseValue = 0;

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "date";
series.strokeWidth = 2;
series.tensionX = 0.77;
series.connect = true;

// bullet is added because we add tooltip to a bullet for it to change color
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.tooltipText = "{valueY}";

bullet.adapter.add("fill", function(fill, target){
    if(target.dataItem.valueY < 0){
        return am4core.color("#FF0000");
    }
    return fill;
})
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = -1000;
range.contents.stroke = am4core.color("#FF0000");
range.contents.fill = range.contents.stroke;


chart.cursor = new am4charts.XYCursor();

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#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>

截图
平滑：https://i.stack.imgur.com/xeb7p.png
正常：https://i.stack.imgur.com/uN60h.png

我该如何纠正这种错误行为？

Answer 1

对于任何感兴趣的人，解决方案是更改平滑算法。 https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Alternate_smoothing_algorithm

通过设置series.smoothing = "monotoneX"，线条将被正确绘制。感谢 martynasma，他在这里回答：https://github.com/amcharts/amcharts4/issues/3219

amCharts：如何绘制具有数据间隙的正确平滑线

amCharts: how to draw correct smoothed line with data gaps

javascript

amcharts

amcharts4