2

我有一个场景，我想根据复选框选择来切换系列。我在图例中使用labelFormatting选项将复选框添加到图例中，例如：

     var otherOptions = {
                           legend: {
                                     container: legend,
                                     labelFormatter: function (label, series) {
                                        var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label;
                                        return cb;
                                     }
                            },
                         };

我已经为图例添加了点击事件，以便我可以根据选中的项目来操作系列。一切正常，除非我取消选中图例中的标签，重新绘制它也会从图例中删除该系列线。所以例如，下面是之前和之后的图像：

前

前

后

后

请注意，后图像“美国”复选框缺失。有什么办法我仍然可以在图例中显示未选中的“美国”复选框？

我在这里查看了建议：flot graph, use legend to turn on/off series

但唯一的问题是我不想将图例和复选框图例分开。给定链接上的问题已在 1 年前得到回答，所以我想我会抓住机会再次问这个问题，以防有人知道如何做到这一点。

请告诉我。

谢谢！

4

2 回答 2

6

如果未选中该复选框，则不要一起删除该系列，而是使用空数据添加它。

像这样的东西：

function plotByChoice(doAll)
{
  $('#legend .legendCB').each(
   function(){
     if (this.checked)
     {         
       data.push(datasets[someLabel]);
     }
     else
     {
       data.push({label: someLabel, data: []})
     }        
   }
 );

 // plot call etc...
}

工作小提琴就在这里。

于 2012-04-05T15:57:21.393 回答
0

对于任何寻找干净解决方案和 Chart.js v3 的人：

不幸的是，这对于 Chart.js v3 是不可能的，因为图例是用文本生成的（不幸的是，不能将 HTML 附加到图例本身）。

我们必须使用generateLabels函数来渲染图例标签。

我建议使用pointStyle渲染图像的选项（实际上是复选框），而不是默认情况下的矩形，因此我们可以在每次用户检查或不检查图例时自动重新渲染（它是动态的，ofc，我们不必做任何事情编程复杂）。

因此，首先，生成与复选框相对应的 2 个图像（我使用的是从 SVG 文件以 PNG 格式生成的 FontAwesome 图标）：

let checkboxYes = new Image(14, 14);
checkboxYes.src = '/static/img/check_yes.png';
let checkboxNo = new Image(14, 14);
checkboxNo.src = '/static/img/check_no.png';

然后，我们可以在 Chart.js 选项中使用它：

legend: {
    labels: {
        usePointStyle: true,
        generateLabels: function(chart) {
            labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
            for (var key in labels) {
                labels[key].pointStyle = labels[key].hidden ? checkboxNo : checkboxYes
            }
            return labels;
          }
    }
},

解释

  • 我设置usePointStyle为true以便以后可以自定义点样式
  • Chart.defaults.plugins.legend.labels.generateLabels(chart)有点为我预先生成标签（并将其存储到标签中），所以它就像一个函数覆盖！
  • 然后对于每个标签，我将根据参数pointStyle将其更改为复选框图像（如果用户选中了该框）hidden
  • 最后，返回标签

这可能不是最好的解决方案，但对我来说效果非常好：

单击此处以 GIF 格式查看动画结果 :)

于 2021-08-14T17:41:35.773 回答