Преобразование данных JSON в Chart.js столбчатая диаграмма

ProgramBox

Преобразование данных JSON в Chart.js столбчатая диаграмма

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#javascript #json #ajax #chart.js

Вопрос:

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

Мой файл JSON:

 [{"REGION":"Poland","REV_VALUE":"2263"},{"REGION":"United States","REV_VALUE":"1961"},{"REGION":"Spain","REV_VALUE":"555"},{"REGION":"United Kingdom","REV_VALUE":"380"},{"REGION":"Germany","REV_VALUE":"314"}]

И вот мой barchar.js файл:

 $(document).ready(function(){
  $.ajax({
    url: "http://localhost/DWH/dataJSON.php",
    method: "GET",
    dataType : 'JSON',
    success: function(data) {
      console.log(data);
      var region = [];
      var value = [];

      for(var i in data) {
        region.push(data[i].REGION);
        value.push(data[i].REV_VALUE);
      }

      var chartdata = {
        labels: region,
        datasets : [
          {
            label: 'Region',
            backgroundColor: 'rgba(200, 200, 200, 0.75)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: value.map(function(x) {return x * 1;})
          }
        ]
      };

      var ctx = $("#myChart");

      var barGraph = new Chart(ctx, {
        type: 'bar',
        data: chartdata
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

Я попытался реализовать решение, которое я нашел в других разделах, но все еще безуспешно.
Любая помощь была бы очень признательна!

1. Спасибо за предоставление фрагмента данных JSON, это значительно упростило формулировку фактического ответа. Желаю удачи, дайте мне знать, если возникнут какие-либо проблемы, и если мой ответ смог направить вас на правильный путь.

2. Большое вам спасибо за ваше время и помощь. У меня это работает идеально! Благодаря вам мы снова на правильном пути.

Ответ №1:

Я сделал это быстро, чтобы дать вам пример, который поможет вам разобраться, вы были в правильном направлении. У меня есть фрагмент, использующий жестко закодированные данные для примера, а затем внизу я использовал метод Ajax.

Проанализировал данные следующим образом, аналогично тому, что вы делали с помощью data.map() .

 let region = [];
let rev_value = [];

try {
  data.map((item) => {
    rev_value.push(item.REV_VALUE);
    region.push(item.REGION);
  });
} catch (error) {
  console.log(error);
}

Затем, чтобы использовать данные, я просто использовал оператор распространения для содержимого массива [...] .

 labels: [...region],
data: [...rev_value],

Пример 1 использование Canvas.js простой пример с вашими жестко закодированными данными.

 var ctx = document.getElementById('myChart').getContext('2d');

let data = [{
  "REGION": "Poland",
  "REV_VALUE": "2263"
}, {
  "REGION": "United States",
  "REV_VALUE": "1961"
}, {
  "REGION": "Spain",
  "REV_VALUE": "555"
}, {
  "REGION": "United Kingdom",
  "REV_VALUE": "380"
}, {
  "REGION": "Germany",
  "REV_VALUE": "314"
}];

let region = [];
let rev_value = [];

try {
  data.map((item) => {
    rev_value.push(item.REV_VALUE);
    region.push(item.REGION);
  });

  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [...region],
      datasets: [{
        label: 'Regions',
        data: [...rev_value],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });

} catch (error) {
  console.log(error);
}

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Пример 2 используя свой шаблон и вызов Ajax, измените URL для запроса.

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
    function grab() {
        /* Promise to make sure data loads */
        return new Promise((resolve, reject) => {
            $.ajax({
                url: "/data.json",
                method: "GET",
                dataType: 'JSON',
                success: function(data) {
                    resolve(data)
                },
                error: function(error) {
                    reject(error);
                }
            })
        })
    }

    $(document).ready(function() {
        grab().then((data) => {
            console.log('Recieved our data', data);
            let regions = [];
            let value = [];

            try {
                data.forEach((item) => {
                    regions.push(item.REGION)
                    value.push(item.REV_VALUE)
                });

                let chartdata = {
                    labels: [...regions],
                    datasets: [{
                        label: 'Region',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: [...value]
                    }]
                };

                let ctx = $("#myChart");

                let barGraph = new Chart(ctx, {
                    type: 'bar',
                    data: chartdata
                });

            } catch (error) {
                console.log('Error parsing JSON data', error)
            }

        }).catch((error) => {
            console.log(error);
        })
    });
</script>

Ответ №2:

Вы можете попробовать что-то вроде этого :

     dataPoints: variable ? variable.map((v) => ({x: (v.region), y: v.value})) : []