0

我正在尝试预先缩放我的图表以显示当天。这是我的图表：

    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 进行缩放

4

1 回答 1

2

You're loading data externally. This means that the data is not yet available when "ready" event kicks in, so your zoomToDates() call is "firing blank".

You're better off using "datavalidated" event, which will kick in when data is loaded and ready, so it's a good moment to pre-zoom your chart.

chart.events.on("datavalidated", function () {
    dateAxis.zoomToDates(
        new Date(2019, 5, 02),
        new Date(2019, 5, 03)
    );
});
于 2019-05-03T12:37:07.990 回答