如何在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>

请注意，即使从segmentStrokeColor变量中删除了options，之前尝试为每个饼图段的笔划着色也不起作用。

Answer 1

与饼图和条形图不同，Pie one不支持每段的 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);