Chart.jsが初期化時にアクティブなセグメントを設定

Question

私はchart.js v2で作業していますが、チャートがロードされているときにドーナツグラフ上のセグメントのホバー状態をシミュレートしようとしています。

私は1日分のコードを探していましたが、これを行うには良い方法を見つけられません。

ありがとうございます！

Answer 1

セグメントのホバースタイルを設定するのは、実際にはどこにも書かれていないため、少し混乱します。それにもかかわらず、伝説のラベルがぶら下げられたときにセグメントを強調したいとき、私はしばらく前にそれを把握することができました。

これを行うには、円グラフ.updateHoverStyle()プロトタイプメソッドを使用して、強調表示するセグメントを渡す必要があります。グラフセグメントは、配列内の_metaオブジェクトに格納され、各セグメントインデックスは、チャートのデータ配列内の各値の位置と一致します。ここで

は、あなたのチャートのインスタンスはVARに格納されたと仮定すると（例でmyPieと呼ばれる。

// get the segment we want to highlight 
var activeSegment = myPie.data.datasets[0]._meta[0].data[segmentIndexToHihlight]; 

// update the hover style 
myPie.updateHoverStyle([activeSegment], null, true); 

// render so we can see it 
myPie.render(); 

あなたはちょうどあなたがVARでそれを強調表示し、保存したいセグメントがsegmentIndexToHihlightと呼ばれ、それがどうあるべきかを定義する必要があります仕事。ここ

はcodepen exampleがこれを証明している。注意してください、私は意図的に変更を見ることができるように起こる（私は3秒待つ）負荷のセグメントをハイライト表示されませんでした。