Внедрить живые данные в диаграмму в виде чарта - Javascript - PullRequest
Новая
       5

Внедрить живые данные в диаграмму в виде чарта - Javascript

0 голосов
/ 30 марта 2020

Я хочу обновлять данные гистограммы каждые 10 секунд или около того, не обновляя всю страницу,

Я использую этот метод для извлечения данных массива из функции контроллера Laravel, 

function getChartData(){
  $.get( "tickets/chart/firstresponse", function( data ) {
    $( ".result" ).html( data );

  console.log(data);
  return data;

  });

  setTimeout(getChartData, 150000);

}

getChartData();

Ниже приведен фрагмент моей диаграммы, мне нужно иметь возможность извлечь данные из контроллера и поместить их в серийные данные, 

function barChart(){

var seriesdata = [['1','2','3','4','5']];

new Chartist.Bar('.ct-chart', {
  labels: ['8', '30', '60', '90', '180'],
  series: getChartData()
}

Итак, у вас есть полная картина, вот что я имею в мой контроллер, в настоящее время только тестовые данные, 

public function firstResponseChart(){

$array = [['1','2','3','4','5']];

return $array;

}

Я могу console.log (data) из функции getChartData (), и он возвращает, как я ожидал бы это

enter image description here

Мне просто нужны данные, которые будут использоваться в серии, после того, как я узнал, что тогда я могу просто установить тайм-аут на графике для перезагрузки время от времени.

1 Ответ

0 голосов
/ 31 марта 2020

У меня это работает, используя следующее, я не знаю, является ли это лучшей практикой, но для тех, кто не пишет javascript так часто, я не думаю, что это плохо.

Моя проблема заключалась в передаче данных из функции в другую функцию. Когда я встроил диаграмму в функцию, которую использовал для получения данных от контроллера Laravel, он работал.

Затем из дочерней функции Я вызвал тайм-аут, чтобы он обновил и извлек данные из контроллера. 

function dataChart() {

    $.get("http://localhost:8000/tickets/chart/firstresponse", function(data) {
        $(".result").html(data);


        function barChart() {

            new Chartist.Bar('.ct-chart', {
                labels: ['8', '30', '60', '90', '180'],
                series: data
            }, {
                chartPadding: {
                    top: 20,
                    right: 0,
                    bottom: 30,
                    left: 0
                },
                axisY: {
                    onlyInteger: true
                },
                plugins: [
                    Chartist.plugins.ctAxisTitle({
                        axisX: {
                            axisTitle: 'Days',
                            axisClass: 'ct-axis-title',
                            offset: {
                                x: 0,
                                y: 50
                            },
                            textAnchor: 'middle'
                        },
                        axisY: {
                            axisTitle: 'Minutes',
                            axisClass: 'ct-axis-title',
                            offset: {
                                x: 0,
                                y: 0
                            },
                            textAnchor: 'middle',
                            flipTitle: false
                        }
                    })
                ]
            }).on('draw', function(data) {
                if (data.type === 'bar') {
                    data.element.attr({
                        style: 'stroke-width: 30px;stroke:skyblue;'
                    });
                }
            });

            setTimeout(dataChart, 10000);


        }


        barChart();
    })



}

dataChart();
...