ChartJS - 一度に1セットのデータを表示する

Question

ChartJSでいくつかのことをしようとしていますが、ドキュメントに必要な情報が見つからず、フォーラムや質問をするのに便利な場所です。

私が達成しようとしている主なことは、一度に1セットのデータしか表示されないようにすることです。私はロード時に設定したものを隠すことができましたが、クリックすると最初のものを隠す方法がわかりません。最終的には3セットあり、他の2つが隠されていることを確認する必要があります。私はクリックイベントを取得する方法を読んだが、私は何を返すか分からない。

また、ラベルのテキスト/レイアウト&のタイトルをカスタマイズすることもできますが、これが実行可能かどうかはわかりません。ここで

は、私は、コードのために、これまで持っているものです。

var ctx = $("#myChart"); 
var data = { 
    labels: ["LABEL1", "LABEL2", "LABEL3", "LABEL4", "LABEL5"], 
    datasets: [ 
    { 
     label: "DATA1", 
     backgroundColor: "rgba(62,135,74,.5)", 
     pointBackgroundColor: "#34b44a", 
     data: [3, 3, 4, 2, 3] 
    }, 
    { 
     label: "DATA2", 
     backgroundColor: "rgba(255,99,132,0.2)", 
     pointBackgroundColor: "rgba(255,99,132,1)", 
     data: [2, 2, 4, 4, 3], 
     hidden: true 
    } 
    ] 
}; 

var options = { 
    title: { 
    display: true, 
    fontColor: '#999', 
    fontStyle: 'regular', 
    fullWidth: false, 
    text: 'CHART TITLE' 
    }, 
    legend: { 
    fullWidth: false, 
    labels: { 
     fontColor: '#fff', 
     boxWidth: 0 
    } 
    }, 
    elements: { 
    line: { 
    } 
    }, 
    scale: { 
    angleLines: { 
     color: '#666' 
    }, 
    gridLines: { 
     color: '#666' 
    }, 
    pointLabels: { 
     fontColor: '#fff' 
    }, 
    ticks: { 
     min: 0, 
     max: 5, 
     stepSize: 1, 
     display: false 
    } 
    }, 
    tooltips: { 
    enabled: false 
    } 
}; 

var myRadarChart = new Chart(ctx, { 
    type: 'radar', 
    data: data, 
    options: options 
}); 

あなたは右のデザインで、ここでそれを見ることができます。http://codepen.io/haxen2000/pen/jBVMqK

Answer 1

ここに私の解決策へのペンです：http://codepen.io/haxen2000/pen/evgwmB

私は必要なものを取り出してHTML要素にして、必要に応じてスタイルを設定できます。 ChartJSコード内の解決策を見てうれしいですが、これはうまくいくでしょう。

<div class='header'> 
    <span class='title'>CHART TITLE</span> 
    <button id='data1'>DATA1</button> 
    <button id='data2'>DATA2</button> 
</div>