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一起使用。您的日期递减，这可能导致滚动条损坏等问题。只需在您的数组上调用fulfillmentText：

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;
}

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

2 个答案: