ラインchartjsにボーダーを描画

Question

私はChartJSを使用して要素を持つ折れ線グラフを作成しています。私は要素の左右に罫線を設定することが可能かどうか疑問に思っていますか？これは私のチャートです。お互いに隣り合った2つの要素があり、同じ色を持っていると混乱します。

私はそれをサポートしているドキュメントでは何も見つからなかったしましたので、私は、私はJSを使用して、それを自分自身を描画する必要がありますが、私は誰かが最初のソリューションを持っていた:)
をする場合には期待していた私はそれを描くために持っていることを把握私は時間軸（X）のために、すべての要素が異なる幅を持つことができるので、問題に遭遇します。それを解決するあなたのアイデアは何ですか？

更新

チャート内のすべての要素が新しいデータセットであるとのbackgroundColorとしてグラデーションオブジェクトを取得し、真としてセットを埋めます。ここでは、チャートここ

chart.data.datasets.push({ 
 
       fill: true, 
 
       backgroundColor: gradient, 
 
       data: [ 
 
       { 
 
        x: aIstartX, 
 
        y: yAxis_value, 
 
        .. Other attributes 
 
       }, 
 
       { 
 
        x: newEntryXend, 
 
        y: yAxis_value, 
 
        ..Other attributes 
 
       }] 
 
      });

xAxes: [ 
 
         { 
 
          stacked: false, 
 
          type: 'time', 
 
          unit: 'minute', 
 
          position: 'bottom', 
 
          scaleLabel: { 
 
           display: true 
 
          }, 
 
          time: { 
 
           displayFormats: { 
 
            'minute': 'mm:ss' 
 
           } 
 
          }, 
 
          ticks: { 
 
           autoSkip: true, 
 
           beginAtZero: true, 
 
           stepSize: 2, 
 
           autoSkipPadding: 5, 
 
           padding: 10, 
 
           labelOffset: 5, 
 
          }, 
 
          gridLines: { 
 
           display: false, 
 
           tickMarkLength: 20 
 
          }, 
 
         } 
 
         ]

に新しいデータセットをプッシュ私の例では、私の問題のバイオリンです

https://jsfiddle.net/fa8hvhtv/1/

Answer 1

以下のようにしてみてくださいカント。問題は、自分のデータセットとデータ属性Yの間にスペースを作成しようとしていたことでした。そのため、0の開始点と終了点を指定しました。そのため、borderWidthが3でborderColorがbackgroundColorの各データセットに2つのデータポイントを追加しました。余分に追加された各データポイントには、Yの値が0になります。グラフにデータセットを追加する例を以下に示します。

chart.data.datasets.push({ 
      fill: true, 
      backgroundColor: gradient, 
      borderWidth: 3, 
      borderColor: '#333', 
      data: [ 
      { 
       x: startXvalue, 
       y: 0 
      }, 
      { 
       x: startXvalue, 
       y: startY, 
       .. Other attributes 
      }, 
      { 
       x: newEntryXend, 
       y: endY, 
       .. Other attributes 
      }, 
      { 
       x: newEntryXend, 
       y : 0 
      }] 
     }); 

Answer 2

あなたが同じ背景色を維持したいことができない理由、

は、なぜあなたは私の問題への解決策を見つけた

Demo

fill: true, 
backgroundColor: 'red',