chart.js 数据通过 API 动态基于选择形成

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

第一步是为“日期”、“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”的数据为字符串格式，为了在图表中使用它，您需要将值解析为浮点数或整数，然后才能在上述步骤中返回。同样对于“0”（即data2）。上面还添加了颜色属性。如果您需要在同一个图表中同时使用 data1 和 data2，则创建一个像这样的组合数据集

    data={data1,data2}

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

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

这是我能想到的最简单的例子，希望对你有帮助