Как предварительно увеличить текущий день на отметке времени - PullRequest
Новая
       33

Как предварительно увеличить текущий день на отметке времени

0 голосов
/ 03 мая 2019

Я пытаюсь предварительно увеличить мои графики, чтобы показать текущий день.Вот мой график: 

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

Я ожидаю увеличения с 3 мая 2019 года в 00:00 до4 мая 2019 года в 23: 59

1 Ответ

2 голосов
/ 03 мая 2019

Вы загружаете данные извне. Это означает, что данные еще не доступны, когда наступает событие "ready", поэтому ваш вызов zoomToDates() является "пустым".

Вам лучше использовать событие "datavalidated", которое срабатывает, когда данные загружаются и готовятся, так что это хороший момент для предварительного увеличения графика. 

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