AMCharts 4-以前版本3的用户遇到了一些问题

我使用AMCharts版本3已经有一段时间了,我想继续使用新版本4。我在复制我在旧版本中所做的工作时遇到了不少困难。我已经浏览了文档和示例,尝试了不同的东西,但仍然无法让它按照我的意愿运行。

• 第一个“日/值”由轴切断

• X轴上的日期与光标显示的日期不居中,这看起来很奇怪。

• 应该只显示7个数据点(7天),但结尾总是显示额外的一天,在图表的右侧提供一个空白空间

• 我无法将值工具提示集中在数据点上

• 最后,我根本无法更改日期格式,并尝试了文档中为此显示的每个示例[已修复]

我想知道这是否与在我的数据中使用时间戳有关。以前的版本对此没有问题。

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

chart.data = randomData();
chart.fontSize = 12;
chart.paddingRight = 0;
chart.paddingLeft = 0;
chart.paddingTop = 20;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.grid.template.location = 0;
dateAxis.tooltip.background.pointerLength = 0;
dateAxis.tooltip.fontSize = 12;

//fixes the date display
dateAxis.dateFormats.setKey("day", "EEE, MMM dd");
dateAxis.periodChangeDateFormats.setKey("day", "EEE, MMM dd");

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.min = 0;

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "timestamp";
series.dataFields.valueY = "count";
series.stroke = am4core.color("#eb4741");
series.strokeWidth = 2;
series.tensionX = 0.8;
series.fill = am4core.color("#eb4741");
series.fillOpacity = 0.1;
series.tooltipText = "Total : {valueY}";
series.tooltip.background.pointerLength = 0;
series.tooltip.fontSize = 12;
series.tooltip.background.strokeOpacity = 0;
series.tooltip.background.fillOpacity = 1;

var dropShadow = new am4core.DropShadowFilter();
dropShadow.dy = 0;
dropShadow.dx = 0;
dropShadow.opacity = 0;
series.tooltip.filters.push(dropShadow);

var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
bullet.circle.strokeWidth = 2;

chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.opacity = 0;
chart.cursor.lineY.opacity = 0;

//random data generator up to 300
function randomData() {

    var curr_date = $.now();

    //counter
    var count = 7;

    //rand value
    function randValue() {
        return Math.floor(Math.random() * 300);
    }

    series = [  
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()}
    ];

    return series;
}

小提琴在 JSFiddle

编辑:当我遇到其他人有同样的问题时,我设法解决了日期格式问题。Fiddle已经更新了,但是其他东西仍然有问题。