如何將疊加顏色添加到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。它按照我想要的方式工作得很好。現在我對每個數據集都有一個值，它是例如：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/