如何在chart.js饼图段中添加叠加颜色？-Howtoaddoverlaycolortochart.jspiechartsegment?

I'm using Chart.js to draw charts on my web page.

我正在使用Chart.js在我的网页上绘制图表。

I'm successfully able to draw pie chart by below codes:

我已成功通过以下代码绘制饼图:

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 : "
-legend\"><% for (var i=0; i
\"><%if(segments[i].label){%><%=segments[i].label%><%}%>
<%}%>
"
            });

NOTE: Here canvas is my canvas id. It's working fine the way I want it. Now I have a value for each dataset which is the % complete value for ex: PHP - 20%, Javascript- 30%, HTML - 20%. Now I want to make 20% of PHP segment in deep color and 80% which is not complete in fade color. Some how to distinguish how much % complete.

注意:这里画布是我的画布ID。它按照我想要的方式正常工作。现在我有一个每个数据集的值,它是ex的完整值:PHP - 20%,Javascript-30%,HTML - 20%。现在我想制作深色的20%的PHP片段和80%的淡化色不完整的片段。有些如何区分完成多少%。

1 个解决方案

.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"
  },