2017-09-22 2 views
0

私は一連のドーナッツチャートを作成しています。凡例で2番目のアイテムを削除したいので、generateLegend()メソッドを使用して凡例を生成すると、最初の値を取得します。 documentationChartJs.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(); 

事前にお問い合わせいただきありがとうございます。

+0

OMG、私はCSSについてこれまで考えていなかったJavaScriptに焦点を当てていましたが、今は第2の子供を隠してしまいます。あなたの答えはまだ受け入れられません学ぶだけのJavaScriptソリューションで、とても感謝しています。 – ryangus

答えて

1

フィルタ機能は、JavascriptのネイティブArray.prototype.filterとまったく同じように機能します。特定のインデックスに凡例を表示する場合はtrueを返します。

EDIT:フィルタ機能はlabelsフィールドの内側にあります。

+0

私はあなたが甘くしたように[ここ](https://codepen.io/ryansegus/pen/VMKqdN)を試しましたが、それは私にとってはうまくいかないか、間違っているようです... – ryangus

+0

申し訳ありません...私の悪い。私の編集版をチェック!それがうまくいくことを望みます。 – dsaket

+1

また、 'legendItem.datasetIndex'ではなく' legendItem.index'です – dsaket