Chart.js 饼图 : How to set background image for segment

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，重写初始化器和addData——在初始化器中重新定义draw，添加一行:

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

，紧接着它说:

ctx.fillStyle = this.fillColor;

(复制 Pie 的画，添加那条线 - 或者只是从附加的 fiddle 底部复制我的 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 .

有关完整的工作示例，请参阅随附的 fiddle https://jsfiddle.net/arlon_arriola/pkwftkp2/

加载页面的依赖项是 Chart.js 文件(v1.01？)(它只是复制/粘贴到顶部的 fiddle 中，使代码看起来很长，但相关代码在最底部)，以及图像在您的 ./imgs/patterns/文件夹中，以及对某些托管 jquery(1.9？)的引用。 (和 body 标签)

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