Angular-Chart-JS - ポイントの範囲に応じて塗りつぶしの色が異なる線図

Question

グラフの種類を表示するには、私のウェブサイトにAngular-Chart-jsを使用しています。

私は線グラフを色で塗りつぶしたいですが、y軸の値に応じて色分けしてください。この写真のように：

グラフの "データ"配列には異なるデータ配列がありますが、最初の値はすべての値を持ち、2番目の値はすべて緑色で塗りつぶされています3番目の配列は紫色の範囲などまで同じ配列であり、各データセットに対して独自の色を持っていますが、最終的に最後のデータセットの色に従って単一色のグラフが得られます。

私には何が欠けていますか？それを達成する方法はありますか？

ありがとうございました。

Answer 1

残念ながら、現在のchart.js設定オプションでは、これを達成できません。理由は、折れ線グラフbackgroundColorオプション（折れ線グラフ塗りの色を制御するオプション）が1つの値しか受け付けないためです。

現在のchart.js 2.5ソースを掘り下げた後、ライン要素のdraw()メソッドを拡張し、chart.jsに（単一の色ではなく）塗りつぶしにキャンバスの線形グラデーションを使用することが可能であることが判明しました。 。少しの計算で、各点のx位置を線形グラデーションカラー停止位置に変換し、グラデーションを作成することができます。

この機能強化により、さまざまな色の塗りつぶし領域を実現するために、ラインチャートbackgroundColorオプションに一連の色を渡すことができます。結果のチャートがどのように表示されるかの例を次に示します。ここで

が実際に（一番下の実施例で）それを行う方法である

まず、我々は直線勾配を構築することができるように、我々はChart.elements.Lineを拡張し、それがdraw()方法だ上書きする必要があります各点の位置に基づいて、線の塗りつぶしとして使用し、線を描画します。

// save the original line element so we can still call it's 
// draw method after we build the linear gradient 
var origLineElement = Chart.elements.Line; 

// define a new line draw method so that we can build a linear gradient 
// based on the position of each point 
Chart.elements.Line = Chart.Element.extend({ 
    draw: function() { 
    var vm = this._view; 
    var backgroundColors = this._chart.controller.data.datasets[this._datasetIndex].backgroundColor; 
    var points = this._children; 
    var ctx = this._chart.ctx; 
    var minX = points[0]._model.x; 
    var maxX = points[points.length - 1]._model.x; 
    var linearGradient = ctx.createLinearGradient(minX, 0, maxX, 0); 

    // iterate over each point to build the gradient 
    points.forEach(function(point, i) { 
     // `addColorStop` expects a number between 0 and 1, so we 
     // have to normalize the x position of each point between 0 and 1 
     // and round to make sure the positioning isn't too percise 
     // (otherwise it won't line up with the point position) 
     var colorStopPosition = roundNumber((point._model.x - minX)/(maxX - minX), 2); 

     // special case for the first color stop 
     if (i === 0) { 
     linearGradient.addColorStop(0, backgroundColors[i]); 
     } else { 
     // only add a color stop if the color is different 
     if (backgroundColors[i] !== backgroundColors[i-1]) { 
      // add a color stop for the prev color and for the new color at the same location 
      // this gives a solid color gradient instead of a gradient that fades to the next color 
      linearGradient.addColorStop(colorStopPosition, backgroundColors[i - 1]); 
      linearGradient.addColorStop(colorStopPosition, backgroundColors[i]); 
     } 
     } 
    }); 

    // save the linear gradient in background color property 
    // since this is what is used for ctx.fillStyle when the fill is rendered 
    vm.backgroundColor = linearGradient; 

    // now draw the lines (using the original draw method) 
    origLineElement.prototype.draw.apply(this); 
    }    
}); 

そして、我々はまた、（このプロパティが既にロード時に設定されているので）チャートで使用される線要素は、我々は上記拡張一つであることを確実にするために線グラフを拡張する必要が

// we have to overwrite the datasetElementType property in the line controller 
// because it is set before we can extend the line element (this ensures that 
// the line element used by the chart is the one that we extended above) 
Chart.controllers.line = Chart.controllers.line.extend({ 
    datasetElementType: Chart.elements.Line, 
}); 

これで、行の塗りつぶしを制御するために、線のグラフbackgroundColorプロパティ（単なる値ではなく）に色の配列を渡すことができます。

codepen exampleは、これまでに説明したすべてを示しています。

警告：我々は内部をいじっているので、

• このアプローチは、将来のchart.jsリリースで破損する可能性があります。
• 私はangular-chart.jsに精通していませんので、上記のchart.jsの変更を角度指示に組み込む方法についての洞察はできません。

Answer 2

あなたはこれを行うには、以下「ハッキング」方法を多分angular2、そこNG2-チャートでこの機能を持っていると思いますが、これは、私はそれを動作させるためにヨルダンのコードを適用することができた方法の場合：

1. ng2-chartのChart.jsへのダウングレードを2.7.xから2.5にダウングレードしました。
   - あなたのプロジェクトのディレクトリから：NPMインストールchart.js@2.5 --save
2. インサイドnode_modules/chart.js/SRC /チャート： - （輸出の内側）Chart.line.jsにヨルダンのコードを追加した後、 Chart.line機能
3. はChart.js/DISTを再構築します。 - 実行NPMは
4. 実行ゴクゴクをインストールするには、socket.ioコードからエラーが発生した場合、その後、あなたはそれ以上に、それらの依存関係をアップグレードする必要があります
5. を構築socket.ioの現在のバージョンでは、カルマには2.0にアップグレードできる古いバージョンのsocket.ioがあると思います。

とにかくこれは私のために働いた。それは完全にテストされておらず、確かに "ハック"ですが、私はChart.js 2.7を学びたいとは思わなかったので、なぜジョーダンのコードがうまく動作しないのかを理解しています。これは確かにそれを行うためのより適切な方法です。私はそれが "プラグイン"として統合されるべきだと思います。