Как добавить цвет наложения в сегмент круговой диаграммы 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; 
} 

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/