如何将叠加颜色添加到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/