amcharts 4 - 以前的版本 3 用户遇到一些麻烦

Question

我使用 amcharts 版本 3 已经有一段时间了，想转到新版本 4。我在复制我在旧版本中所做的事情时遇到了很多麻烦。我浏览了文档和示例，尝试了不同的方法，但仍然无法按照我的意愿进行操作。

首先'day/value'被轴切断
x轴上的天数不以光标显示的天数为中心，看起来很奇怪
应该只显示 7 个数据点（7 天），但最后总是显示额外的一天，在图表右侧给出空 space
我无法获得以数据点为中心的值工具提示
最后，我根本无法更改日期格式，并且尝试了文档中针对此 [已修复]

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

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

Fiddle 在 JSFiddle

编辑：我设法解决了日期格式问题，因为我遇到了遇到同样问题的其他人。 Fiddle 已更新，但其他内容仍有问题。

Answer 1

first 'day/value' is cutoff by the axes

the days on the x-axis aren't centered with the days displayed by the cursor which looks very weird

我认为这是当您在页面上运行超出 space 时的默认行为。标签和指导线未与数据点对齐。

例如：https://www.amcharts.com/demos/date-based-data/

这有一个原因，在文档中有解释：https://www.amcharts.com/docs/v4/concepts/axes/#Labels_on_Date_axis

要"force"标签与数据点对齐，我发现的唯一方法是将minGridPosition设置为一个小数字。但这有显示每个标签的缺点，即使没有足够的 space，使所有标签都夹在一起：

...,
xAxes: [{
    type: "DateAxis",
    renderer: {
        grid: {
            disabled: true
        },
        minGridDistance: 1
    },
    tooltip: {
        fontSize: 12,
        background: {
            pointerLength: 0
        }
   }
}],
...

演示： http://jsfiddle.net/davidliang2008/0shze83d/

I can't get the value tooltip centered over the data point

您必须将 pointerOrientation 更改为 "vertical"，而不是它的侧面。此外，您可能还想对齐文本：

...,
series: [{
    type: "LineSeries",
    ...,
    tooltip: {
        pointerOrientation: "vertical",
        textAlign: "middle",
        textVAlign: "middle",
        ...
    },
    ...
}],
...

演示： http://jsfiddle.net/davidliang2008/hy5xeu1w/

amcharts 4 - 以前的版本 3 用户遇到一些麻烦

amcharts 4 - previous version 3 user with some troubles

javascript

amcharts