2016-07-06 17 views
0

ここに私が直面している問題を説明するjsfiddleがあります。私は古いバージョンで行われている可能性のように、私は基本的に私はチャート 機能にオプションを渡す達成したい2.1.6/Chart.jsの折れ線グラフにグローバルオプションを渡す

https://jsfiddle.net/xjdvngwe/

...(塗りつぶしとベジェ曲線を無効にする)は、基本的にオブジェクトのオプションを渡したいですチャート作成の時間

var options = { fill:false,tension:0, lineTension :0.1}; 
var chart_testChart = new Chart.Line(ctx, 
    { 
     data: data, 
     options: options 
    }); 

で、最新バージョン2.1.6で、私はこのようにそれらを渡すと、彼らは正常に動作が、私はへの道を探しています、これは

を動作させることはできませんoptionsオブジェクトとして渡す

var data = { 
labels: ["January", "February", "March", "April", "May", "June", "July"], 
datasets: [ 
    { 
     label: "My First dataset", 
     fill: false, 
     lineTension: 0.1, 

答えて

0

あなたはチャートが構築されているか誤解ので、それは次のとおりです。

あなたがfilltension属性は直接両方のオプションのルートであったと想定さが、彼らはoptions.element.lineに実際にあります。詳細については

、(あなたのケースでラインコンまでスクロール)Chart.jsドキュメントについてelement configurationをご確認ください。


しかし、注意してください!混同しないでください:

datasets: [ 
{ 
    label: "My First dataset", 
    fill: false, 
    lineTension: 0.1, 
    // ... 
}] 
:あなたはグラフのデータに渡すデータセットを編集して(あなたがあなたの質問
の第二部で行うことをどうにかして

  • は、一つの要素を編集しますグラフのオプションを編集して、同じタイプの

  • 編集するすべての要素(ここでは、折れ線グラフ):

    var options = { elements: { line: { /*options */ } } }; 
    
    で述べたよう

    Iは、上記得られた:

    オプションは、要素の4つの異なるタイプのために構成することができます。円弧、線、点、矩形などがあります。 このオプションを設定すると、データセットに接続されている構成によって特に上書きされない限り、これらのオプションはそのタイプのすべてのオブジェクトに適用されます。

ですから、実際にはオプションで直接これらの属性を編集する前すべて折れ線グラフを編集することを確認してください。あなたはまだオプションで編集したい場合は


さて、あなたはこのようなあなたのoptions VAR構築する必要があります。ここでは

var options = { elements: { line: { fill: false, tension: 0.1 } } }; 
var chart_testChart = new Chart.Line(ctx, 
{ 
    data: data, 
    options: options 
}); 

をあなたは結果を見たい場合はworking fiddleです。

+1

詳細な説明をありがとうございます!私はこれを簡単に推測することはできませんでした。既存のドキュメントを見ることで –

+0

@PuneetGuptaドキュメントには多くの情報がありますが、探しているものを見つけるのが難しい場合もあります。 – tektiv

関連する問題