将图例行为从删除线更改为颜色变化

问题描述 投票:0回答:1

由于我发现删除线非常烦人,因为它遮盖了文本,因此有时很难分辨隐藏时的图例标签是什么,我想改变行为,这样,标签不再是删除线,而是更改为灰色。

我将其用于 onclick 函数:

legend:{
   onClick:function(e,legendItem,legend){
      toggleDatasetVisibility(e,legendItem,legend);
   }
}

对于该功能,我已经尝试过:

function toggleDatasetVisibility(e, legendItem, legend) {
    const index = legendItem.datasetIndex;
    const ci = mychart;
    const mydataset = ci.data.datasets[index];
    const isVisible = ci.isDatasetVisible(index);
    ci.setDatasetVisibility(index, !isVisible);

    if (ci.isDatasetVisible(index)) {
        legendItem.fontColor = 'red';
        legendItem.hidden = false;
    } else {
        legendItem.fontColor = 'gray';
        legendItem.hidden = false;
    }

    const legendItems = legend.legendItems;
    legendItems[index].textDecoration = 'none';
}

但是,我现在得到的行为是,当我单击标签并且鼠标光标仍在标签上时,标签确实会改变颜色,但是一旦我将鼠标移开,数据集就会隐藏,并且标签会恢复为删除线。

任何可以提供的帮助将不胜感激。

chart.js legend
1个回答
0
投票

您尚未指定您正在使用的 Chart.js 版本,因此 我假设是最新的,但是你的代码会出现一些错误, 很容易纠正,然后点击一下就什么也没有发生 在图例颜色框上。无论如何,解决方案应该是相同的, 即使版本稍旧。

更改作为参数发送到

legendItem
处理程序的
onClick
不是更改图例项外观的方法。也不是
legend.legendItems[index]
,实际上是同一个对象。

执行

onClick
时,
legendItem
仅 用于阅读信息。

要使

toggleDatasetVisibility
中的任何更改出现在 图表,必须调用
ci.update()
;或类似
ci.hide()
ci.show()
自己调用
update

但是,调用

update
会导致调用
generateLabels
, (源代码plugin.legend.js#L675) 并在那里重新计算图例项和那些重新计算的值 用于显示图例标签。

解决方案是对

labelItems
进行任何更改 在函数
options.plugins.legend.labels.generateLabels
中,考虑到 考虑标签的状态(即隐藏):

const _defaultGenerateLabels = Chart.defaults.plugins.legend.labels.generateLabels;
function generateLabels(...args){
   const labelItems =  _defaultGenerateLabels.apply(this, args);
   labelItems.forEach(labelItem => {
      if(labelItem.hidden){
         labelItem.hidden = false;
         labelItem.fontColor = '#aaa';
         labelItem.fillStyle = '#ddd';
         labelItem.strokeStyle = '#ccc';
      }
      else{
         labelItem.fontColor = 'red';
      }
   });
   return labelItems;
}

labelItem.fillStyle = '#ddd';
labelItem.strokeStyle = '#ccc';
也将相邻的颜色框设置为灰色。 对于此应用程序,无需为图例
onClick
实现处理程序。

演示片段:

const _defaultGenerateLabels = Chart.defaults.plugins.legend.labels.generateLabels;
function generateLabels(...args){
   const labelItems =  _defaultGenerateLabels.apply(this, args);
   labelItems.forEach(labelItem => {
      if(labelItem.hidden ){
         labelItem.hidden = false;
         labelItem.fontColor = '#aaa';
         labelItem.fillStyle = '#ddd';
         labelItem.strokeStyle = '#ccc';
      }
      else{
         //labelItem.fontColor = 'red';
         // better set "normal" color in options.plugins.legend.label.color
      }
   })
   return labelItems
}

const data = {
   labels: [
      'January', 'February', 'March', 'April', 'May', 'June'
   ],
   datasets: [
      {
         label: 'Dataset 1',
         data: Array.from({length: 6}, () => Math.random()*10 - 5),
      },
      {
         label: 'Dataset 2',
         data: Array.from({length: 6}, () => Math.random()*10 - 5),
      },
   ]
};

const config = {
   type: 'line',
   data: data,
   options: {
      responsive: true,
      plugins: {
         legend: {
            position: 'top',
            labels: {
               //color: 'red',
               generateLabels
            }
         }
      }
   },
};

new Chart("myChart", config);
<div style="height: 200px">
   <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

© www.soinside.com 2019 - 2024. All rights reserved.