Javascript 带多个图例的ChartJS条形图

Javascript 带多个图例的ChartJS条形图,javascript,html,css,chart.js,Javascript,Html,Css,Chart.js,我正试图根据下图为每个条动态创建多个图例: 我一直在努力使它更像他们的折线图,它显示了一个带有标签的图例和一个与图表上每条线相关的彩色正方形。(他们没有多行图表的示例,但它确实是这样工作的) 下面是执行此操作的代码,用于在数据集中创建多个项,每个项仅具有一个类别的数据 var ChartDataObjectsArray = []; for (i = 0; i < ChartDataObjects.length; i++) { sw

我正试图根据下图为每个条动态创建多个图例:

我一直在努力使它更像他们的折线图,它显示了一个带有标签的图例和一个与图表上每条线相关的彩色正方形。(他们没有多行图表的示例,但它确实是这样工作的)

下面是执行此操作的代码,用于在数据集中创建多个项,每个项仅具有一个类别的数据

var ChartDataObjectsArray = [];

        for (i = 0; i < ChartDataObjects.length; i++)
        {
            switch (i)
            {
                case 0:
                 ChartDataObjectsArray[i] = {
                    label: ChartDataObjects[i].Region,
                    data: [ChartData[i]],
                     backgroundColor: "#0923FF",
                   
                    }
                    console.log("Switch case 0 : "+ ChartDataObjectsArray[i].label);
                    break;
                case 1:
                 ChartDataObjectsArray[i] = {
                    label: ChartDataObjects[i].Region,
                    data: [ChartData[i]],
                    backgroundColor: "#0923FF",
                    }
                    console.log("Switch case 1 : " + ChartDataObjectsArray[i].label);
                    break;
                case 2:
                 ChartDataObjectsArray[i] = {
                    label: ChartDataObjects[i].Region,
                    data: [ChartData[i]],
                    backgroundColor: "#0923FF",
                    }
                    console.log("Switch case 2 : "+ ChartDataObjectsArray[i].label);
                    break;
                case 3:
                 ChartDataObjectsArray[i] = {
                    label: ChartDataObjects[i].Region,
                    data: [ChartData[i]],
                    backgroundColor: "#0923FF",
                    }
                    console.log("Switch case 3 : "+ ChartDataObjectsArray[i].label);
                    break;      
            }


        }
    console.log(ChartDataObjectsArray);

    var canvas = document.getElementById('MyChart3');
            new Chart(canvas, {
                type: 'bar',
                
                    data: {
                      labels: ChartLabel,
                      datasets: ChartDataObjectsArray,
                    },
                options: {
                    
                    legend: { position: 'bottom' },
                        scales: {
                            xAxes: [{
                                ticks: {
                                    display: false
                                }
                            }]
                        },
                      title: {
                        display: true,
                        text: 'Predicted world population (millions) in 2050'
                      }
                    }
        });
   });
var ChartDataObjectsArray=[];
对于(i=0;i
但不知道为什么我会根据以下结果在一个选项卡中获取所有数据:


我找到了解决方案,实际上我只给了labels属性一个字符串值,而不是数组列表,它可以工作:)数据:{labels:[“Total Sales”],数据集:ChartDataObjectsArray,},