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

Question

我有一个对象数组，这就是我将值分配给它的方式。  $("#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);        });这就是我的对象数组在检查元素中的样子 - 控制台如何获取Region的值并将其绑定到以下标签： 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,                    }]                },            }        }); 仅供参考我已经尝试过myData[Region]但它不起作用大佬们，我找了一天的解决方法，好像找不到，请帮忙

Answer 1

您可以在数组上设置labelsusing.map()方法，例如：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();

});