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

时间:2017-08-21 08:08:48

标签: javascript angularjs canvas chart.js

我正在使用Chart.js创建一个图形,我的问题是我有一个带有这样的对象的数组 0: {y: 17854.69, y2: 14283.75, x: Thu Aug 17 2017 02:00:00 GMT+0200 (Romance Daylight Time)} 1: {y: 41750.08, y2: 33400.06, x: Wed Aug 16 2017 02:00:00 GMT+0200 (Romance Daylight Time)}

我的图表有两个不同数据的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

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

1 个答案:

答案 0 :(得分:1)

如果我理解正确,这就是你的意思;

如果您已创建chartData,则可以按如下方式访问数据集:

Subrank[] pastSubRank = new Subrank[1];
pastSubRank[0] = new Subrank();
pastSubRank[0].StartDate = DateTime.Parse("2012-05-22");

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

完成后不要忘记调用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(); 功能。