首页 文章

使用Chartjs.org V2.7过滤图例项

提问于
浏览 次
1

我正在构建一系列圆环图，我想删除图例中的第二项，所以当我使用generateLegend（）方法生成图例时，我只想获得第一个值 .

在documentation中有一个读取选项

过滤图例中的图例项目 . 接收2个参数，图例项和图表数据

但我找不到一个如何使用它的例子 . 在这个Pen中你可以看到中间的2个标签，我只想显示第一个标签 . 我尝试了不同的方法但没有成功 . 只是删除该项目对我不起作用，因为 <li> 项目仍然存在 . 这是我正在使用的代码 .

$id = function(id) {
  return document.getElementById(id);
};

var langDataEs = {
  type: "doughnut",
  data: {
    datasets: [
      {
        data: [75, 25],
        backgroundColor: ["#8dc63f", "#1d1d1d"]
      }
    ],
    labels: ["es", "learning"]
  },
  options: {
    legend: {
      display: false,
      /* I would like to remove the item "learning" */
      filter: function() {

      },
    },
    responsive: true
  }
};

langChartEs = new Chart($id("langEs").getContext("2d"), langDataEs);
$id("es").innerHTML = langChartEs.generateLegend();

提前感谢任何指针 .

javascript chart.js chartjs-2.6.0

1 回答

  • 4

    过滤器功能与Javascript的原生 Array.prototype.filter 完全相同 . 因此，如果要在特定索引处显示图例，则返回true .

    EDIT: 过滤器功能将在 labels 字段内 .

    legend: {
      display: true,
      labels: {
           filter: function(legendItem, data) {
                return legendItem.index != 1 
           }
      }
 }
    回复于

相关问题