如何為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% 。 現在，我想將20％的PHP代碼段設為深色，將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/