Question

我正在尝试放大图表以显示当前日期。这是我的图：

    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.dataSource.url = "https://api.myjson.com/bins/vz0pg";
    chart.dataSource.events.on("parseended", function(ev) {
        var data = ev.target.data;
        data.sort(function(lhs, rhs) {
            return lhs.time - rhs.time;
        });
        data.forEach(function(item) {
            item.time *= 1000;
        });
    });
    chart.numberFormatter.numberFormat = "#.0b";
    chart.dateFormatter.inputDateFormat = "x";
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.dateFormats.setKey("minute", "d MMM, \nHH:mm");
    dateAxis.periodChangeDateFormats.setKey("minute", "d MMM, \nHH:mm");
    dateAxis.dateFormats.setKey("hour", "d MMM, \nHH:mm");
    dateAxis.periodChangeDateFormats.setKey("hour", "d MMM, \nHH:mm");
    dateAxis.startLocation = 0.5;
    dateAxis.endLocation = 0.5;
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "time";
    series.name = "Traffic out";
    series.dataFields.valueY = "outDiffFormatted";
    series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series.tooltipText = "[#000]{valueY.value}[/]";
    series.tooltip.background.fill = am4core.color("#FFF");
    series.tooltip.getStrokeFromObject = true;
    series.tooltip.background.strokeWidth = 3;
    series.tooltip.getFillFromObject = false;
    series.fillOpacity = 0.6;
    series.strokeWidth = 2;
    series.stacked = false;
    var series2 = chart.series.push(new am4charts.LineSeries());
    series2.dataFields.dateX = "time";
    series2.name = "Traffic in";
    series2.dataFields.valueY = "inDiffFormatted";
    series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series2.tooltipText = "[#000]{valueY.value}[/]";
    series2.tooltip.background.fill = am4core.color("#FFF");
    series2.tooltip.getFillFromObject = false;
    series2.tooltip.getStrokeFromObject = true;
    series2.tooltip.background.strokeWidth = 3;
    series2.sequencedInterpolation = true;
    series2.fillOpacity = 0.5;
    series2.stacked = false;
    series2.strokeWidth = 2;
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.lineY.opacity = 0;
    chart.cursor.xAxis = dateAxis;
    chart.scrollbarX = new am4charts.XYChartScrollbar();
    chart.scrollbarX.series.push(series);
    chart.legend = new am4charts.Legend();
    chart.legend.position = "top";

    chart.events.on("ready", function () {
      dateAxis.zoomToDates(
        new Date(2019, 5, 02),
        new Date(2019, 5, 03)
      );
    });

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
    width: 100%;
    height: 500px;
}

<!DOCTYPE html>
    <html>
        <head>
        <style>

        </style>
        </head>
        <body>
            <script src="https://www.amcharts.com/lib/4/core.js"></script>
            <script src="https://www.amcharts.com/lib/4/charts.js"></script>
            <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
            <div id="chartdiv"></div>
        </body>
    </html>

这是我添加的代码：

chart.events.on("ready", function () {
    dateAxis.zoomToDates(
        new Date(2019, 5, 02),
        new Date(2019, 5, 03)
    );
});

我希望从2019年5月3日00:00放大到2019年5月4日23:59

Answer 1

您正在外部加载数据。这意味着当"ready"事件开始时，数据尚不可用，因此您的zoomToDates()呼叫是“空白”。

最好使用"datavalidated"事件，该事件会在数据加载并准备就绪时启动，因此是预先缩放图表的好时机。

chart.events.on("datavalidated", function () {
    dateAxis.zoomToDates(
        new Date(2019, 5, 02),
        new Date(2019, 5, 03)
    );
});

如何在时间戳上预先缩放到当前日期

1 个答案: