使用滚动条时 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

尝试使用 CategoryAxis 并删除 let 并将其替换为 var：

var chart = am4core.create("chart", am4charts.XYChart);      
chart.paddingRight = 20;
chart.data = data;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "date";

也试着用逗号写日期。像这样：

var data = [
    {"value": 27.77,
     "date": "2018-12-12"
    }]

Answer 2

您的日期需要按升序排列才能与 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>

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

Line in LineSeries disappearing when Scrollbar is used

amcharts