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

У меня есть задача перейти от 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. Какие-нибудь советы? Или несколько примеров того, как это достигается, не зная, какие выборы выбраны и автоматически формируют наборы данных без жесткого кодирования значений / меток?

javascript chart.js javascript-objects chartjs-2.6.0 chart.js2
person dumbQuestions    schedule 15.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

первым шагом является создание отдельных наборов данных (массивов) для «даты», «6» и «0». Вы можете использовать функцию карты в 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
  }
 }

это самый простой пример, который я мог придумать, надеюсь, это поможет

person bharath kumar    schedule 15.10.2018
comment
Эй, это что-то в правильном направлении, хотя мне нужно загружать объекты данных на основе выбора - person dumbQuestions; 16.10.2018
comment
Я бы предложил простой способ сделать это ... вы можете загрузить все наборы данных заранее в диаграмму, а затем использовать функцию LEGEND в chartjs для отображения определенного набора данных. это не то, что вы просили, но попробуйте - person bharath kumar; 16.10.2018