Chart.js 饼图：如何为片段设置背景图片

Question

Chart.js 饼图：如何为片段设置背景图片

5

我正在使用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);

- checkmate711

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arlon Arriola · Accepted Answer

子类化 Pie，重写初始化器并添加数据 - 在初始化器中重新定义 draw，添加一行：

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

"

"之后，紧接着是"

"。

ctx.fillStyle = this.fillColor;

(copy Pie的绘图，添加那行-或者只是从附带的小提琴底部复制我的AltPie子类)这可能对于以后的版本有所不同，但这就是Chart.js 1.01的方式。

此外，在您的Pie子类中，您将添加一个属性（例如称其为bg_img）以通过该属性发送背景图像。要执行此操作，只需添加一行代码即可重新定义AltPie中的addData并在splice行内添加属性：

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画布墨水模式

(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？）（只需将其复制/粘贴到顶部的小提琴中即可使代码看起来非常长，但相关代码位于最底部），以及您./imgs/patterns/文件夹中的图像和对某些托管jquery（1.9？）的引用。（和一个body标签）

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