如何为Horizo​​ntalBar中的每个标签组设置不同的标签值

时间:2018-07-26 17:53:46

标签: javascript jquery chart.js

我正在尝试为“标签”数组的每个位置建立一组不同的标签(3个值),但是我做不到。

例如:

对于AA值,应在第一组条形图中显示以下值:valueA1:4,valueA2:10和valueA3:9。

对于BB值,应显示第二组条形中的值:valueB1:12,valueB2:7和valueB3:6。

我是Charts.js的新手,但我尝试这样做,但是没有用:

$(document).ready(function() {
            var grafico = document.getElementById("myChart").getContext('2d');
            var mData = [
                            {
                                "categoria":"AA",
                                "mayores":[
                                            {"name":"valueA1", "val":4 },
                                            {"name":"valueA2", "val":10},
                                            {"name":"valueA3", "val":9 }
                                          ]
                            },
                            {
                                "categoria":"BB",
                                "mayores":[
                                            {"name":"valueB1", "val":12 },
                                            {"name":"valueB2", "val":7 },
                                            {"name":"valueB3", "val":6 }
                                          ]
                            }
                        ];

            var myData = {
                labels : [],
                datasets : []
            };

            var my_options = {
                title: {
                    display: false
                },
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            };

            myBarChart = new Chart(grafico, {
                type: 'horizontalBar',
                data: myData,
                options: my_options
            });

            mData.forEach( function(objJson,indice){

                myData.labels.push(objJson.categoria);
                //myBarChart.update();
                objJson.mayores.forEach( function(subJson,ind){

                    var newDataset = {
                        label: subJson.name,
                        backgroundColor: 'rgba(151,187,205,0.5)',
                        data: [subJson.val]
                    };

                    myData.datasets.push(newDataset);
                    myBarChart.update();

                });

                //myBarChart.update();

            });

            //myBarChart.update();

    });

Image with the result code

请,有人可以帮我吗?谢谢!

0 个答案:

没有答案