0

我不是 JavaScript 开发人员，我想要一些关于如何将对象数组（从 WebAPI 调用获取）转换为适合 Chart.JS 的数组的指针。

到目前为止，我的代码（有效）如下所示：

<canvas id="line-chart" width="800" height="450"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<script>
    // webapi call returns an object which looks like this
    var raw = {
        message: "Success: 3 entries",
        didError: false,
        errorMessage: null,
        model:
        [
            { time: "2019-09-26T13:19:00", value1: 1, value2: 2, value3: 3, value4: 4 },
            { time: "2019-09-26T13:20:00", value1: 22, value2: 21, value3: 20, value4: 19 },
            { time: "2019-09-26T13:21:00", value1: 10, value2: 20, value3: 40, value4: 70 }
        ]
    };

    // chart.js needs the data to look like this
    var data = {
        labels: ["19:00", "20:00", "20:01"],
        datasets: [
            {
                data: [1, 22, 10],
                label: "Value 1",
                borderColor: "red",
                fill: false
            },
            {
                data: [2, 21, 20],
                label: "Value 2",
                borderColor: "blue",
                fill: false
            },
            {
                data: [3, 20, 40],
                label: "Value 3",
                borderColor: "green",
                fill: false
            },
            {
                data: [4, 19, 70],
                label: "Value 4",
                borderColor: "orange",
                fill: false
            }
        ]
    };

    var options = { title: { display: true, text: 'stuff' } };

    var chart = new Chart(document.getElementById("line-chart"), { type: 'line', data: data, options: options });

</script>

如何将我的“原始”数据转换为 Chart.JS 期望的格式？我可以让 webAPI（我写的）返回任何东西，但不认为返回 chart.js 格式数组是要走的路。它目前返回 1440 个对象 - 而不是 3 个！

我不懂js，所以我不知道如何做循环和类型转换，所以任何指针都感激不尽。如果可能的话，我宁愿不包括额外的包。

4

2 回答 2

1

首先，您需要拆分模型数据：

const hashed = raw.model.reduce((acc, item) => {
  Object.keys(acc).forEach(k => acc[k].push(item[k]);
  return acc;
}, {
  value1: [],
  value2: [],
  value3: [],
  value4: [],
});

然后我们可以把它变成chart.js的数据：

const chartData = Object.entries(hashed).map(([label, data]) => ({
  data,
  label,
  fill: false,
}));

剩下的就是选择颜色（随机？如果没有从标签到颜色的映射）并且可能格式化标签/键。

于 2019-09-27T19:08:44.277 回答
0

转换的两个任务是提取时间戳以制作标签数组，然后转置值。要遍历它们，您可以使用简单的 for 循环，例如

for(obj in model)
{
    model[obj] // Trick here is that obj is an index not the object itself
}

您也可以考虑达拉斯评论并尝试使用地图。这样会简洁很多。因为一旦你设置了标签，你就可以像达拉斯的例子那样轻松地转置数据。

var colors = {/*maps value name to desired color*/};
var valueLabels = {/*maps value name to value labels*/};
var valueNames = [/* list of value names*/];
for(var i in valueNames) {
    var dataVals = raw.model.map(x => x[valueNames[i]]);
    data.datasets.push({
         data: dataVals,
         label: valueLabels[valueNames[i]],
         borderColor: colors[valueNames[i]],
         fill: false
   });
}

希望这个例子有帮助！

于 2019-09-27T19:12:06.633 回答