使用滚动条时 LineSeries 中的线条消失

Question

当图表有滚动条并且我们尝试使用它时出现的问题。线条刚刚从图表中消失。使用AmChart 4

这是带有示例的 codepen： https: //codepen.io/smertelny/pen/jdyGZR

已经尝试将值从十进制更改为整数（只是删除了逗号）。没有效果。

let data = [
    {
        "value": 27.75,
        "date": new Date(2019, 0, 31)
    },
    {
        "value": 27.77,
        "date": new Date(2019, 0, 30)
    },
    {
        "value":  27.79,
        "date": new Date(2019, 0, 29)
    },
    {
        "value": 27.81,
        "date": new Date(2019, 0, 28)
    },
    {
        "value": 27.78,
        "date": new Date(2019, 0, 27)
    }
]

let chart = am4core.create("chart", am4charts.XYChart);
let xAxis = chart.xAxes.push(new am4charts.DateAxis());
let yAxis = chart.yAxes.push(new am4charts.ValueAxis())

xAxis.dataFields.category = "date";
xAxis.title.text = "Date";

let series = chart.series.push(new am4charts.LineSeries())
let bullet = series.bullets.push(new am4charts.CircleBullet())
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY}"
chart.cursor = new am4charts.XYCursor();
series.name = "Value";
series.strokeWidth = 2;
chart.scrollbarX = new am4core.Scrollbar();

chart.data = data;

我错过了什么吗？

Answer 1

您的日期需要按升序排列才能与 DateAxis 配合使用。您的日期正在下降，这可能会导致滚动条损坏等问题。只需调用reverse()您的数组即可：

let data = [
    {
        "value": 27.75,
        "date": new Date(2019, 0, 31)
    },
    {
        "value": 27.77,
        "date": new Date(2019, 0, 30)
    },
    {
        "value":  27.79,
        "date": new Date(2019, 0, 29)
    },
    {
        "value": 27.81,
        "date": new Date(2019, 0, 28)
    },
    {
        "value": 27.78,
        "date": new Date(2019, 0, 27)
    }
].reverse();

let chart = am4core.create("chart", am4charts.XYChart);
chart.data = data;
let xAxis = chart.xAxes.push(new am4charts.DateAxis());
let yAxis = chart.yAxes.push(new am4charts.ValueAxis())

xAxis.dataFields.category = "date";
xAxis.title.text = "Date";

let series = chart.series.push(new am4charts.LineSeries())
let bullet = series.bullets.push(new am4charts.CircleBullet())
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY}"
chart.cursor = new am4charts.XYCursor();
series.name = "Value";
series.strokeWidth = 2;
chart.scrollbarX = new am4core.Scrollbar();

div {
  width: 100%;
  height: 300px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chart"></div>