Chart.js 饼图：如何设置段的背景图像

Question

我正在使用 Chart.js 创建饼图（见下文）。我想使用背景图像，而不是每个饼图段中的颜色。

你能给我一个关于我如何做到这一点的指针吗？

谢谢！

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    }
];
var myPieChart = new Chart(ctx[0]).Pie(data,options);

Answer 1

子类 Pie，重写初始化程序并添加数据 - 在初始化程序中重新定义绘制，添加一行：

if(this.bg_img)ctx.fillStyle=ctx.createPattern(this.bg_img,"repeat");  

，就在它说：

ctx.fillStyle = this.fillColor;

（复制 Pie 的绘图，添加该行 - 或者只是从附加小提琴的底部复制我的 AltPie 子类）这对于更高版本可能有所不同，但这就是 Chart.js 1.01 的情况。

另外，在 Pie 子类中，您将添加一个属性（例如，称为 bg_img）用于发送背景图像。为此，需要进行一行添加，因此在 AltPie 内重新定义 addData 并在拼接线内添加属性：

bg_img : segment.bg_img,

例如线路附近的某个地方

fillColor : segment.color,  

这就是大部分内容 - 除此之外，您将加载图像，然后将图像附加到您用来制作图表的数据中。要加载它们，您可以使用

....img=new Image();...img.src=...and - img.onload=function()(..recurse-load-next,  

使用类似于此页面中的解决方案#2的递归回调： stackoverflow.com/questions/4960111/image-as-a-background-to-a-drawn-shape
我认为您需要确保图像在之前完成加载将它们附加到数据并将它们发送到 Chart.js 渲染器，因此递归模式会在将它们附加到图表数据之前一一加载它们，然后创建新的 AltPie 图表。

最终结果是您的图像将显示在饼图背景中，或者如果没有图像，您仍然可以使用彩色背景。它改变了 html5 canvas 墨水图案

(ctx.fillStyle=ctx.createPattern(this.bg_img,"repeat"))

作为附加到图表数据的图像，也取自同一页面的解决方案 #2：stackoverflow.com/questions/4960111/image-as-a-background-to-a-drawn-shape。

有关完整的工作示例，请参阅附加的小提琴https://jsfiddle.net/arlon_arriola/pkwftkp2/

加载页面的依赖项是 Chart.js 文件（v1.01？）（它只是复制/粘贴到顶部的小提琴中，使代码看起来非常长，但相关代码位于最底部）和图像在你的 ./imgs/patterns/ 文件夹中，以及对一些托管 jquery (1.9?) 的引用。（和身体标签）

我相信您也可以获得图像翻转，只需将两个图像附加到数据，找出它重新绘制悬停的位置，并以与常规绘制相同的方式修改它。