javascript - 我如何使用 Chart.js 中的对象键迭代或从数组中获取所有对象

Question

我正致力于在 Chart.js 中制作图表，我的问题是我拥有和排列看起来像这样的对象
0:
{y:17854.69，y2:14283.75，x:2017 年 8 月 17 日星期四 02:00:00 GMT+0200(浪漫夏令时)}
1:
{y: 41750.08, y2: 33400.06, x: 2017 年 8 月 16 日星期三 02:00:00 GMT+0200(浪漫夏令时)}

我的图表有两个带有不同数据的 y 轴和一个带有日期的 x 轴。我的 charData 看起来像这样。

var chartData = {
                labels: dates,
                datasets: [{
                        yAxisID: "funding",
                        label: "Credorax DK Funding",
                        data: [{
                                y: CredoraxDK[i].y,
                                x: CredoraxDK[i].x

                        }],
                        position: "left",
                    },
                    {
                        yAxisID: "release",
                        label: "Credorax DK Release",
                        data: [{
                                y: CredoraxDK[i].y2,
                                x: CredoraxDK[i].x

                        }],
                        position: "right",
                    },

当我尝试这样做时，我只得到数组中的第一个对象键。有什么方法可以用给定的键遍历数组吗？

我的新图表是这样的

                var ctx = document.getElementById("likviditetChart").getContext("2d");
            var chart = new Chart(ctx, {
                type: "line",
                data: chartData,

                options: {
                    stacked: false,
                    responsive: true,
                    onHover: [],
                    tooltips: {
                        mode: "index",
                        intersect: false
                    },
                    scales: {
                        yAxes: [{
                                ticks: {
                                    max: 100000,
                                    min: 0,
                                },
                                type: "linear",
                                display: true,
                                title: "Funding",
                                id: "funding",
                                position: "left",

                            }, {
                                ticks: {
                                    max: 100000,
                                    min: 0,
                                },
                                type: "linear",
                                display: true,
                                title: "Release",
                                id: "release",
                                position: "right",
                            }]
                    }
                }
            });

Picture of graph. As you can see there are only two points on the graph, and i have 6 objects in my array, but when i write chart data like this, chart.js only puts out the first object in the array

希望我的问题能以某种方式得到解决。

Answer 1

如果我没有理解错的话，这就是你的意思；

如果您已经创建了 chartData，您可以按如下方式访问数据集:

chartData = {
    datasets: [{
              yAxisID: "funding",
              label: "Credorax DK Funding",
              data: [],
              position: "left",
        },
        {
              yAxisID: "release",
              label: "Credorax DK Release",
              data: [],
              position: "right",
        }
   ,//other config, etc...
  };

//init chart with this config
var ctx = document.getElementById("likviditetChart").getContext("2d");
var chart = new Chart(ctx, chartData);

//itterate your data and add it to the datasets
for (var i = 0; i < CredoraxDK.length;i++){
    chartData.datasets[0].data.push({
                            y: CredoraxDK[i].y,
                            x: CredoraxDK[i].x});
    chartData.datasets[1].data.push({
                            y: CredoraxDK[i].y2,
                            x: CredoraxDK[i].x});
}

//update  new data.
chart.update();

基本上，您首先设置图表配置，然后将图表数据添加到数据数组。

完成后不要忘记调用 chart.update(); 函数。