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

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 : "<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>"
            });

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 个解决方案

#1

Create a new canvas object and position it under the actual chart. This new chart has the split data values. Make sure that the datapoints in your original chart that are split have a transparent background so that the underlying splits show through.

创建一个新的画布对象并将其放置在实际图表下。此新图表具有拆分数据值。确保原始图表中拆分的数据点具有透明背景,以便显示底层拆分。

Preview

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;
}

Script

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

Fiddle - http://jsfiddle.net/ww8qpdvw/

小提琴 - http://jsfiddle.net/ww8qpdvw/

#1