通过API根据选择动态生成chart.js数据

Question

我有一个从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>

我需要一个折线图，因此我需要为每个选择的这些选项和它们的颜色，度量ID（选项的值），日期组成一个对象（数据集）数组，因为日期是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方式将它们推送到数组。 有小费吗？ 还是在不知道选择了哪些选择并自动形成数据集而无需对值/标签进行硬编码的情况下如何实现此目的的一些示例？

Answer 1

第一步是为“ date”，“ 6”和“ 0”创建单独的数据集（数组）。您可以使用javascript中的map函数来创建这些数据集。例如，如果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”中的数据为字符串格式，为了在图表中使用它，您需要在返回上述步骤之前将值解析为float或integer。 “ 0”（即data2）。还在上面添加了color属性。 如果您需要在同一图表中同时使用data1和data2，则创建一个这样的组合数据集

    data={data1,data2}

然后通过提供上述值来创建图表

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

这是我可以想出的最简单的例子，希望对您有所帮助