Уменьшить удалить дату, но сохранить время - PullRequest
Новая
       36

Уменьшить удалить дату, но сохранить время

1 голос
/ 26 апреля 2019

Когда я увеличиваю свой график, я вижу дату как 26 Apr, 9:05, но когда я уменьшаю масштаб, я вижу только время как 9:00. Как я могу показать дату все время? Вот мой график (https://codepen.io/anon/pen/GLPPGq): 

am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.dataSource.url = "https://api.myjson.com/bins/i3np8";

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.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";
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>

1 Ответ

2 голосов
/ 26 апреля 2019

Изменение времени при увеличении происходит из-за того, как AmCharts обрабатывает периоды - когда временной интервал видимых данных достигает порогового значения, диаграмма обновляет или понижает формат до другого форматирования даты периода, чтобы обеспечить более заметные точки. Это можно изменить, изменив форматы в periodChangeDateFormats и dateFormats, как описано в документации по дате и времени даты и времени , например: 

dateAxis.dateFormats.setKey("hour", "d MMM,\nHH:mm");
dateAxis.periodChangeDateFormats.setKey("hour", "d MMM,\nHH:mm");

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

am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.dataSource.url = "https://api.myjson.com/bins/i3np8";

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";
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>
...