Диаграмма JS с отображением данных о часах в метке - PullRequest
0 голосов
/ 24 апреля 2020

Я использую библиотеку Chart js для отображения данных в виде линейной диаграммы. Данные отображаются на основе однодневных часов. Теперь проблема в том, что когда я пытаюсь добавить размер шага или любой другой формат для управления отображением данных метки, он не работает с ним.

Я создал один пример кода на jsfiddle, который вы можете отметьте «https://jsfiddle.net/drashti/j1exyt46/15/».

Здесь я добавил данные метки в формате даты и часа и хочу отобразить метку с точностью до 2, но, похоже, она не работает с датой или без даты с данными формата часов на метке. Я не хочу отображать запись данных «7:30» в метке вместо того, чтобы она отображалась только в наборе данных. Кто-нибудь может иметь какие-либо идеи?

Пожалуйста, найдите также пример кода ниже:

    var hours = ["12:00 AM","01:00 AM","02:00 AM","02:20 AM","03:00 AM","04:00 AM","05:00 AM","06:00 AM","07:00 AM","08:00 AM","09:00 AM","10:00 AM"];
var label = ["24/04 02:00","24/04 04:00","24/04 06:00","24/04 07:30","24/04 08:00","24/04 10:00","24/04 12:00","24/04 14:00","24/04 16:00","24/04 18:00","24/04 20:00","24/04 22:00","25/04 00:00"];

    var config = {
        type: 'line',
        data: {
            labels: label,
            datasets: [{
                label: 'My First dataset',
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                data: [10,20,30,40,50,60,40],
                fill: false,
            }, {
                label: 'My Second dataset',
                fill: false,
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.blue,
                data: [10,0,40,50,60,70,0],
            }]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Chart.js Line Chart'
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                x: {
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '24-04-2020'
                    },
        ticks: {
                        precision: 2,
            },
                },
                y: {
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    }
                }
            }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
    };

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...