формирование данных chart.js через API, динамически основанное на выборках - PullRequest
Новая
       15

формирование данных chart.js через API, динамически основанное на выборках

0 голосов
/ 15 октября 2018

У меня есть задача перейти от morris.js к chart.js, и я пытаюсь сформировать данные для chart.js на основе условий.У меня есть несколько вариантов выбора - источник, метрика, учетные записи и еще несколько.Мне нужно сформировать данные в соответствии со значениями этих выборок (множественный выбор), например: 

<select id="metric" class="form-control" id="type" multiple="multiple">
    <option value="6" selected>first metric</option>
    <option value="7">Other metric</option>
    <option value="8">Third metric</option>
    <option value="9">fourth metric</option>
    ...
    <option value="0">final metric</option>
</select>

Мне нужна линейная диаграмма, поэтому мне нужен массив объектов (наборов данных) для каждой из этих опцийкоторые выбраны и цвета для них, метрический идентификатор (значение параметра), дата, потому что даты являются осью Y.Какой лучший способ подойти к этому?У нас уже есть API, который возвращает такие данные: 

[{"date":"2018-09-15","6":"5925.26","0":5925.26},{"date":"2018-09-16","6":"5920.33","0":5920.33},{"date":"2018-09-17","6":"3251.72","0":3251.72},{"date":"2018-09-18","6":"3375.16","0":3375.16},{"date":"2018-09-19","6":"3499.05","0":3499.05},{"rand":"0.36841474432984667"}]
  • объекты для каждого дня вместо объектов для каждого субъекта.В каждом дне могут быть пустые метрики / недостающие метрики.Мы подошли к этому, проанализировав выборки с помощью js и присвоив значениям индексы, основанные на значениях, с именами и изготовили пользовательские метки Y и метки X.Этот подход chartjs сильно отличается от того, что мы использовали ранее.Каков наилучший способ заставить это работать без необходимости переделывать API?У меня возникают проблемы, когда я оборачиваюсь вокруг объектно-ориентированного JavaScript, он сильно отличается от других языков, с которыми я взаимодействовал, и кажется странным, создавая новые объекты, а затем отправляя их в массив способом javascript.Какие-нибудь советы?Или некоторые примеры того, как это достигается, не зная, какие выборки выбраны, и автоматически формируя наборы данных без жесткого кодирования значений / меток?

1 Ответ

0 голосов
/ 15 октября 2018

первый шаг - создать отдельные наборы данных (массивы) для «date», «6» и «0». Вы можете использовать функцию map в javascript для создания этих наборов данных. Например, если данные API хранятся впеременная с именем obj, тогда 

 labels=obj.map(function(e) {
  return e["date"];
  })

метки будут иметь информацию о дате, тогда для "6", "0" 

var data1={
label:"6",
data: obj.map(function(e) {
 return e["6"]
 },
backgroundColor:"red"

}

data1 будет содержать данные из "6"; ПРИМЕЧАНИЕ: данные из" 6 "представлены в строковом формате, для того чтобы использовать их на диаграмме, необходимо проанализировать значение в число с плавающей запятой или целое число перед возвратом на шаге выше и аналогично для" 0 "(т. Е. Data2). Цветовой атрибут также добавлен выше.если вам нужны и data1, и data2 на одной и той же диаграмме, создайте объединенный набор данных, например, 

    data={data1,data2}

, затем создайте диаграмму, указав указанные выше значения 

new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
  labels:labels,
  datasets:data
  }
 }

. Это простейший пример.Я мог бы придумать, надеюсь, это поможет

...