chart.js円チャートセグメントにオーバーレイカラーを追加するにはどうすればよいですか？

Question

私はChart.jsを使って私のウェブページにグラフを描いています。

私は正常に以下のコードで円グラフを描画することができるよ：

var dataPiChart = [ 
      { 
       value: 350, 
       color:"#F7464A", 
       highlight: "#FF5A5E", 
       label: "PHP" 
      }, 
      { 
       value: 100, 
       color: "#46BFBD", 
       highlight: "#5AD3D1", 
       label: "JavaScript" 
      }, 
      { 
       value: 500, 
       color: "#FDB45C", 
       highlight: "#FFC870", 
       label: "HTML" 
      } 
     ]; 

new Chart(document.getElementById('canvas').getContext("2d")).Pie(dataPiChart, { 
       legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 
      }); 

注：ここにcanvasは私のキャンバスのIDです。それは私がそれを望むようにうまく動作しています。今私は、ex：PHP - 20%, JavaScript- 30%, HTML - 20%の％完全な値である各データセットの値を持っています。今度は、深みのある色でPHPセグメントの20％を作成し、フェードカラーでは完全ではない80％を作成したいと思います。どのくらいの割合で完成度をどのように区別するか。

Answer 1

新しいキャンバスオブジェクトを作成し、実際のチャートの下に配置します。この新しいチャートには分割データ値があります。分割されている元のグラフのデータポイントが透明な背景を持つようにして、下にある分割が表示されるようにします。

---

プレビュー

---

HTML

<div class="splitContainer"> 
    <canvas id="canvas" height="300" width="800"></canvas> 
    <canvas class="canvasSplit" id="canvas2" height="300" width="800"></canvas> 
</div> 

CSS

.splitContainer { 
    position: relative; 
} 

.canvasSplit { 
    z-index: -1; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

スクリプト

var dataPiChart2 = [ 
    { 
    value: 200, 
    color:"rgba(247, 70, 74, 0.6)", 
    label: "PHP1" 
    }, 
    { 
    value: 150, 
    color:"rgba(247, 70, 74, 0.2)", 
    label: "PHP2" 
    }, 
    // values that are not split remain as is 
    { 
    value: 100, 
    color: "#46BFBD", 
    label: "JavaScript" 
    }, 
    { 
    value: 500, 
    color: "#FDB45C", 
    label: "HTML" 
    } 
]; 

new Chart(document.getElementById('canvas2').getContext("2d")).Pie(dataPiChart2, { 
    segmentShowStroke: false 
}); 

var dataPiChart = [ 
    { 
    value: 350, 
    // transparent show the split shows through 
    color:"rgba(247, 70, 74, 0.2)", 
    highlight: "rgba(247, 70, 74, 0.7)", 
    label: "PHP" 
    }, 

---

フィドル - http://jsfiddle.net/ww8qpdvw/