Javascript 将对象数组的第一个属性值绑定到chart.js中

我有一个对象数组，我就是这样给它赋值的

  $("#gridview").click(function () {
            $("table tbody th").each(function () {
                var k = $(this).text().trim();
                keys.push(k);
            });
            $("table tbody tr").each(function (i, el) {
                var row = {}
                $.each(keys, function (k, v) {
                    row[v] = $("td:eq(" + k + ")", el).text().trim();
                });
                myData.push(row);
            });
            myData.shift()
            myData.length = 10

            console.log(myData);
        });

这就是我的对象数组在inspect元素控制台中的外观

如何获取区域的值并将其绑定到下面的标签：

 new Chart(document.getElementById("chart"), {
            type: 'horizontalBar',
            data: {
                labels: [I want to display all the region here],
                datasets: [{
                    label: "Android",
                    type: "horizontalBar",
                    stack: "Base",
                    backgroundColor: "#eece01",
                    data: ["I want to display ios user here"],
                }, {
                    label: "ios",
                    type: "horizontalBar",
                    stack: "Base",
                    backgroundColor: "#87d84d",
                    data: ["I want to display android user here"]
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        //stacked: true,
                        stacked: true,
                        ticks: {
                            beginAtZero: true,
                            maxRotation: 0,
                            minRotation: 0
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                    }]
                },
            }
        }); 

FYI我尝试了myData[Region]但不起作用

---

伙计们，我搜索了一整天的解决方案，似乎找不到，请帮助

您可以使用

myData

数组上的方法设置

标签

，如下所示：

data: {
   labels: myData.map(d => d.Region),
   ....
},

编辑：

您可以创建一个新函数并将所有图表初始化代码添加到其中，如下所示：

function CreateChart() {
   new Chart(document.getElementById("chart"), {
      type: 'horizontalBar',
      data: {
         labels: myData.map(d => d.Region),
         ... you code here
      },
      ...
   });
}

CreateChart();

然后在

gridview

上单击，最后再次调用该

CreateChart

函数，如下所示：

$("#gridview").click(function() {
   // all your code logic here
   console.log(myData);
   CreateChart();
});

---

您可以使用

myData

数组上的方法设置

标签

，如下所示：

data: {
   labels: myData.map(d => d.Region),
   ....
},

编辑：

您可以创建一个新函数并将所有图表初始化代码添加到其中，如下所示：

function CreateChart() {
   new Chart(document.getElementById("chart"), {
      type: 'horizontalBar',
      data: {
         labels: myData.map(d => d.Region),
         ... you code here
      },
      ...
   });
}

CreateChart();

然后在

gridview

上单击，最后再次调用该

CreateChart

函数，如下所示：

$("#gridview").click(function() {
   // all your code logic here
   console.log(myData);
   CreateChart();
});

---

顺便说一句，你能帮我再解决一个问题吗？您知道如何删除

Android用户

之间的空格吗？请参考上面的图片。请为这个问题创建一个单独的问题，以便我们一次只关注一个特定的问题。另外，这也会帮助其他用户帮助您提供特定问题的详细答案。顺便问一下，您能再帮我一个问题吗？您知道如何删除

Android用户

之间的空格吗？请参考上面的图片。请为这个问题创建一个单独的问题，以便我们一次只关注一个特定的问题。这也将帮助其他用户帮助您提供特定问题的详细答案。