09
Сен
2021

График из библиотеки ChartJS не отображает данные принимаемые из Ajax

Пытаюсь отрисовать график при помощи библиотеки ChartJS, если прописываю данные вручную график отображается корректно, при включение в основной код то что было получено по Ajax игнорируется, при этом данные получаю выводятся в console.log()

структура

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>

<div class="card-body"> 
  <canvas id="a"></canvas>
</div>

$.ajax({
  url: 'xxxxx',
  type: 'post',
  dataType: 'json',
  data: {id: data['id']},
  success: function(data){
     showChartJS (data['a'], data['b'], data['c'])
}});



function showChartJS (a, b, c){
    let chart_snt = document.getElementById('a');
    var data = {
        labels: a,
        datasets: [{
            label: "b",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: b,
            scaleOverride: false,
            scaleSteps: 0,
            scaleStartValue: 0,
            scaleStepWidth: 1,
            fill: false,
            pointRadius: 1,
            pointHoverRadius: 1
        },
            {
                label: "c",
                backgroundColor: "rgb(82,181,49)",
                borderColor: "rgb(56,136,5)",
                borderWidth: 1,
                hoverBackgroundColor: "rgb(82,181,49)",
                hoverBorderColor: "rgb(56,136,5)",
                data: c,
                scaleOverride: false,
                scaleSteps: 0,
                scaleStartValue: 0,
                scaleStepWidth: 1,
                fill: false,
                pointRadius: 1,
                pointHoverRadius: 1
            }
        ]
    };
    var myBarChart = new Chart(chart_snt, {
        type: 'line',
        data: data,
        options: {
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    autoSkip: false,
                    time: {
                        parser: 'YYYY-MM-DD HH:mm:ss',
                        unit: 'hour',
                        unitStepSize: 6,
                        displayFormats: {
                            'millisecond': 'MMM DD',
                            'second': 'MMM DD',
                            'minute': 'MMM DD',
                            'hour': 'MMM DD',
                            'day': 'MMM DD',
                            'week': 'MMM DD',
                            'month': 'MMM DD',
                            'quarter': 'MMM DD',
                            'year': 'MMM DD',
                        }
                    },
                    scaleLabel: {
                        display: true
                    },
                    ticks: {
                        //source: 'data',
                        //fontSize: 10,
                        //stepSize: 10,
                        //beginAtZero: true
                    }
                }]
            }
        }
    });

};

Входные данные

[Log] ["2021-09-08 15:14:49", "2021-09-08 15:15:49", "2021-09-08 15:16:49", "2021-09-08 15:17:49", "2021-09-08 15:18:49", "2021-09-08 15:19:49", "2021-09-08 15:20:49", "2021-09-08 15:21:49", "2021-09-08 15:22:49", "2021-09-08 15:23:49"]
[Log] ["176277.0", "176278.0", "176282.0", "176285.0", "176288.0", "176291.0", "176294.0", "176296.0", "176300.0", "176305.0"]
[Log] ["0.0", "0.0", "0.0", "0.0", "0.0", "0.0", "0.0", "0.0", "0.0", "0.0"]

Просьба, подсказать, в чем может быть причина что делаю не так

Источник: https://ru.stackoverflow.com/questions/1326925/%D0%93%D1%80%D0%B0%D1%84%D0%B8%D0%BA-%D0%B8%D0%B7-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8-chartjs-%D0%BD%D0%B5-%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B0%D0%B5%D1%82-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BF%D1%80%D0%B8%D0%BD%D0%B8%D0%BC%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5-%D0%B8%D0%B7-ajax

Тебе может это понравится...

Добавить комментарий