使用Chartjs.org過濾圖例項目V2.7

我正在構建一系列的圓環圖，我想刪除圖例中的第二項，因此當我使用generateLegend（）方法生成圖例時，我只想獲得第一個價值。使用Chartjs.org過濾圖例項目V2.7

過濾器傳奇物品了傳奇的一個選項。接收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();

在此先感謝您的任何指針。

來源

2017-09-22 ryangus

OMG，我太專注於做它通過JavaScript，我從來沒有想過的CSS，我就躲，現在第二個孩子，我不會接受你的答案，只是還沒有，看看是否有人能來只需要學習JavaScript解決方案，非常感謝。 – ryangus

過濾器函數的工作原理與Javascript的本機Array.prototype.filter完全相同。所以如果你想在特定的索引處顯示圖例就返回true。

編輯：過濾功能將進入labels字段。

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

來源

2017-11-14 20:14:00 dsaket

我嘗試了[這裏]（https://codepen.io/ryansegus/pen/VMKqdN），因爲你已經擁塞了，但它似乎不適合我或我做錯了... – ryangus

對不起...我的壞。檢查我的編輯版本！希望它有效。 – dsaket

此外，它''legendItem.index'而不是'legendItem.datasetIndex' – dsaket

使用Chartjs.org過濾圖例項目V2.7

回答

相關問題