如何向Chart.js餅圖添加筆觸？

Question

我希望餅圖中的每個部分都有其自己的筆觸顏色。 現在，它似乎只是全局筆畫-我可以在每個餅圖片段上筆畫嗎？ 我嘗試了以下方法，但沒有運氣：

 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> 

請注意，即使從options變量中刪除了segmentStrokeColor ，上一次為每個扇形段的筆觸着色的嘗試也無效。

Answer 1

與餅圖和條形圖不同，餅圖不支持每個段的strokeColor ，它僅使用全局圖。

達到你想要的東西的唯一方法是延長餅圖，復制addData方法和使用segment.strokeColor代替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);