Фиксированная шкала оси X и никогда не меняются графики - PullRequest
Новая
       14

Фиксированная шкала оси X и никогда не меняются графики

1 голос
/ 27 июня 2019

enter image description here

Если вы видите на оси X. Есть увеличение времени на 6 часов. Теперь я хочу изменить его масштаб на 2 часа

Iпросто изучите эту диаграмму вчера и действительно не знаете, как ее использовать.

вот код 

<script type="text/javascript">
//am4core.useTheme(am4themes_kelly);

am4core.useTheme(am4themes_animated);
// Themes end


// Create chart
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

chart.data = generateChartData();

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = {
  "timeUnit": "minute",
  "count": 1
};
dateAxis.tooltipDateFormat = "HH:mm, d MMMM";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.title.text = "Fin 1";

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "visits";
series.tooltipText = "Stacker: [bold]{valueY}[/]";
series.fillOpacity = 0.3;

chart.cursor = new am4charts.XYCursor();
chart.cursor.lineY.opacity = 0;
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);


chart.events.on("datavalidated", function () {
    dateAxis.zoom({start:0, end:1});
});


function generateChartData() {
    var chartData = [];
    // current date
    var firstDate = new Date();
    // now set 12:00 am
    firstDate.setHours(0,0,0,0);

    // and generate 500 data items
    var visits = 0;
    for (var i = 0; i < 1442; i++) {
        var newDate = new Date(firstDate);
        // each time we add one minute
        newDate.setMinutes(newDate.getMinutes() + i);

        chartData.push({
        date: newDate,
        visits: visits
        });

    }
    return chartData;
}
</script>

Я изменил код и доступен для редактирования здесь: https://codepen.io/muhammad-syazani/pen/wLrbQE

1 Ответ

1 голос
/ 27 июня 2019

Да, работа с Осью дат может быть сложной.Даже если вы некоторое время работали с amCharts v4, может быть не совсем понятно, как приручить ось так, как вы хотите.Я настоятельно рекомендую прочитать наше руководство по оси координат в полном объеме, это действительно поможет.График, в основном, попытается выяснить, как можно вписать частоту в график.

Первое, что вы хотите настроить - это dateAxis.renderer.minGridDistance.По умолчанию это 120 пикселей.Пример диаграммы имеет 24 часа, с минимальным интервалом в 120 пикселей на каждые 2 часа, ваша область chart.plotContainer должна быть 120 * (24/2), или, по крайней мере, 1440 пикселей, окно вашего браузера должно быть даже шире этого.Поэтому, если мы сократим это, мы с большей вероятностью сможем уместить 2-часовую сетку с интервалами.

Следующая вещь, и это основной ингредиент, это dateAxis.gridIntervals.Если вы посмотрите на сгенерированную документацию, вы увидите список интервалов, из которых будет выбран график.Там ежечасно или каждые 3 часа, но не каждые 2 часа.Если мы заменим этот список на тот, который имеет 2-часовой интервал, если он может соответствовать, диаграмма будет использовать его.

Вы захотите сделать то же самое на оси даты scrollBarX, какхорошо.

Соответствующий код: 

dateAxis.renderer.minGridDistance = 75; // 75 * 24/2 == 900 minimum plotContainer width requisite

var gridIntervals = [
 { timeUnit: "millisecond", count: 1 },
 { timeUnit: "millisecond", count: 5 },
 { timeUnit: "millisecond", count: 10 },
 { timeUnit: "millisecond", count: 50 },
 { timeUnit: "millisecond", count: 100 },
 { timeUnit: "millisecond", count: 500 },
 { timeUnit: "second", count: 1 },
 { timeUnit: "second", count: 5 },
 { timeUnit: "second", count: 10 },
 { timeUnit: "second", count: 30 },
 { timeUnit: "minute", count: 1 },
 { timeUnit: "minute", count: 5 },
 { timeUnit: "minute", count: 10 },
 { timeUnit: "minute", count: 30 },
 { timeUnit: "hour", count: 1 },
 { timeUnit: "hour", count: 2 }, // This is the 2-hour interval
 { timeUnit: "hour", count: 3 },
 { timeUnit: "hour", count: 6 },
 { timeUnit: "hour", count: 12 },
 { timeUnit: "day", count: 1 },
 { timeUnit: "day", count: 2 },
 { timeUnit: "day", count: 3 },
 { timeUnit: "day", count: 4 },
 { timeUnit: "day", count: 5 },
 { timeUnit: "week", count: 1 },
 { timeUnit: "month", count: 1 },
 { timeUnit: "month", count: 2 },
 { timeUnit: "month", count: 3 },
 { timeUnit: "month", count: 6 },
 { timeUnit: "year", count: 1 },
 { timeUnit: "year", count: 2 },
 { timeUnit: "year", count: 5 },
 { timeUnit: "year", count: 10 },
 { timeUnit: "year", count: 50 },
 { timeUnit: "year", count: 100 }
];
dateAxis.gridIntervals.setAll(gridIntervals);

chart.scrollbarX.events.on("validated", function() {
  chart.scrollbarX.scrollbarChart.xAxes.getIndex(0).gridIntervals.setAll(gridIntervals);
});

Вилка:

https://codepen.io/team/amcharts/pen/9ba62a5bb5239fee149c2d46bf1e4b81

Надеюсь, это поможет!

(Кстати -Salaams! Мне нравится имя пользователя, это ссылка на Fairy Tail?)

...