Анализ значений из внешнего файла JSON с помощью Chart.js

Файлы json в большинстве своем представляют собой строковый тип времени, поэтому диаграмма, которую вы хотите сгенерировать, я думаю, ей нужен своего рода числовой тип, поэтому вам нужно преобразовать данные JSON в числовое время. проверьте здесь, если вы правильно выполните синтаксический анализ JSON, проверьте здесь, как он уже ответил, все будет в порядке.

Здесь есть пара частей.

Шаг первый: загрузите JSON из файла

Мне нравится использовать Принести. Если вы используете jQuery, вы также можете использовать $ .ajax. Предполагая, что файл находится в том же каталоге, что и ваш JS-код, и называется chart.json:

  fetch('./chart.json')
    .then(function (response) {
      return response.json();
    }).then(function (json) {
      // drawChart fn to be created...see below
      drawChart(json);
    }).catch(function (error) {
      console.error(error);
    });

Обратите внимание: если вы запускаете этот код локально, вы, вероятно, получите сообщение об ошибке CORS, если попытаетесь посетить веб-сайт непосредственно из файловой системы (например, file:///<path-to-file>/index.html).

Вместо этого вы можете легко запустить локальный сервер. Перейдите в каталог, содержащий ваш файл в вашем терминале, и запустите:

python -m SimpleHTTPServer 8000

или же

php -S localhost:8000

Это обслуживает текущий каталог на порту 8000. Затем посетите http: // локальный: 8000 /

Также убедитесь, что JSON действителен (без точки с запятой в конце!).

Шаг второй: проанализируйте ответ JSON

Мы пытаемся сделать два массива. Один с числами для данных и один со строками для меток.

Вы можете легко сделать это с помощью карта:

var graphData = json.jsonarray.map(e => e.Color);
// ["Blue", "Red", "Green", "Orange", "Light Blue"]
var graphLabels = json.jsonarray.map(e => e.Value);
// [12, 19, 3, 5, 2]

Шаг третий: соберите все вместе

window.addEventListener("DOMContentLoaded", draw);
function draw() {
  // Get the json file with fetch or $.ajax
  // Pass the json data to drawChart
}
function drawChart(jsonData) {
  /* get graphData and graphLabels
  draw chart with your existing code
  pass graphData and graphLabels in place of
  the hard-coded labels and data in your Chart initialization */
}

расширение идеи:

Сейчас этот код поддерживает только один набор данных. Массив backgroundColor является фиксированным, поэтому, если у вас нет ровно 5 значений, некоторые из цветов фона будут серыми по умолчанию для ChartJS.

Вы можете дополнительно абстрагироваться от кода чертежа для поддержки нескольких наборов данных и даже случайным образом генерировать цвета, соответствующие количеству групп, если вам это необходимо. Просто замените жестко запрограммированные значения при необходимости на переменные, которые вы генерируете из своего набора данных. Надеюсь, это поможет вам начать работу!