html 有没有办法在Javascript中的Chart Js上的1个标签中显示2行?

bnl4lu3b  于 2022-12-16  发布在  Java
关注(0)|答案(1)|浏览(127)

我尝试在ChartJs中重新创建此png。我想创建一个图例,例如Feeder 1,并同时显示2行,就像在png中显示第一个图表一样,但所有内容都链接到一个图例。
无法找到或弄清楚如何添加2数组的值到一个图例,所以当我点击馈线1它显示我在图表中的2行。

datasets: [{
    label: 'Feeder 1',
    data: [12, 19, 3, 17, 6, 3, 7],
    }, {
    label: 'Feeder 2',
    data: [2, 29, 5, 5, 2, 3, 10],
    }]

尝试在数据上添加数组的数组、对象的数组...[]但不工作。

laawzig2

laawzig21#

经过大量的头痛,我所做的是隐藏第二个值图例,并添加点击事件到每一个,当你点击其中一个,然后它点击另一个,它的工作。

plugins: {
                        legend: {
                            labels: {
                                filter: function(legendItem, data) {
                                        if (legendItem.datasetIndex % 2 === 0){
                                            return true;
                                        }
                                        else{
                                            return false;
                                        }
                                },
                            },
                            onClick: newLegendClickHandler,
                        },

这隐藏了偶数索引的图例,因为我是成对运行的,所以我只隐藏第二个,显示第一个。
on click事件如下所示:

const newLegendClickHandler = function (e, legendItem, legend) {
                var index = parseInt(legendItem.datasetIndex);
                const type = legend.chart.config.type;
                
                    var index2 = adjustNumber(index);

                    function adjustNumber(index){
                        if (index % 2 === 0) {
                            index2= index + 1
                            return index2;
                          } else {
                            index2 = index - 1
                            return index2 ;
                          }
                    }

                    let ci = legend.chart;
                    [
                        ci.getDatasetMeta(index),
                        ci.getDatasetMeta(index2)
                    ].forEach(function(meta) {
                        meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
                    });

                    ci.update();

            };

同样,这只是因为我得到的数据是正确的格式和第一个对象与第二个去工作。

相关问题