2016-05-28 4 views
1

私はchart.jsプロジェクトでひどいですが、簡単にするために、線A、B、Cがプレーンな線図であるとしましょう。 A & Bしか表示せず、Cが凡例に横切ってグラフ自体に表示されていない3行すべてを含むグラフを作成する方法はありますか? (それがクリックされたように切り替える。)グラフjsクリックせずに線をトグルする方法

私が持ってしようとしている正確な機能は
1.ラインにA、B、およびCを生成している
2.ラインC

IへのonClick()をシミュレート本当にシンプルなものを見落としていると思うし、chart.jsのソースコードを書き直す前に確かめたいと思っています。私は運がないとドキュメントを検索しました。

ありがとうございます!

+1

jsfiddleを入力してください。 –

+0

@SagarRはそれを持っていますhttps://jsfiddle.net/bg65oLje/6/ – jackr

答えて

0

大丈夫なので、とてもシンプルでした。

隠されていない行のデータ。

{ 
     hidden: true, 
     label: Object.keys(data)[i], 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: color, 
     borderColor: color, 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: color, 
     pointBackgroundColor: "#fff", 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: color, 
     pointHoverBorderColor: color, 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     data: data[Object.keys(data)[i]] 
     } 

(クリック)隠されているラインの

{ 
     label: Object.keys(data)[i], 
     fill: false, 
     lineTension: 0.1, 
     backgroundColor: color, 
     borderColor: color, 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0.0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: color, 
     pointBackgroundColor: "#fff", 
     pointBorderWidth: 1, 
     pointHoverRadius: 5, 
     pointHoverBackgroundColor: color, 
     pointHoverBorderColor: color, 
     pointHoverBorderWidth: 2, 
     pointRadius: 1, 
     pointHitRadius: 10, 
     data: data[Object.keys(data)[i]] 
     } 

データ(クリックと同じ)唯一の違いは

hidden: true 

簡単な修正です。

関連する問題