如何向Chart.js饼图添加笔触？

Question

I want each section in the pie chart to have its own stroke color. Right now, it only seems to do a global stroke--can I get a stroke over each pie segment? I've tried the following, with no luck:

 Chart.defaults.global.segmentShowStroke = true; var ctx = document.getElementById("myChart").getContext("2d"); var data = [{ value: 300, color: "#F7464A", highlight: "#FF5A5E", stroke: "#FF0000", // Doesn't work label: "Red" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", strokeColor: "#00FF00", // Doesn't work label: "Green" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", segmentStrokeColor: "#88FF00", // Doesn't work label: "Yellow" }]; /** * Whether or not segmentStrokeColor is enabled, * the previous stroke options do not work. */ var options = { segmentStrokeColor: "black" // Works. Defaults to "white" if removed }; var myPieChart = new Chart(ctx).Pie(data, options); 

 canvas { border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script> <canvas id="myChart" width="150" height="150"></canvas> 

Note that even if segmentStrokeColor is removed from the options variable, the previous attempts to color the stroke of each pie segment do not work.

Answer 1

Unlike Pie and Bar charts, the Pie one doesn't support a strokeColor per segment, it only uses a global one.

The only way to achieve what you want is to extend the Pie chart, copying the addData method and using segment.strokeColor instead of this.options.segmentStrokeColor :

Chart.types.Pie.extend({
    name: 'SegmentStrokeColorPie',
    addData : function(segment, atIndex, silent){
      ...
      [Copy all the addData method here, only change the line below]
      ...
          strokeColor : segment.strokeColor,
      ...
      ...
    }
});

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red",
        strokeColor: "#FF0000"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green",
        strokeColor: "#00FF00"
    }
];

new Chart(ctx).SegmentStrokeColorPie(data);