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

Subclass Pie，重写初始值设定项和addData - 在初始化程序中重新定义绘图，添加一行：

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

(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？）（它只是复制/粘贴到顶部的小提琴中，使得代码看起来非常长但是relvant代码位于最底层）， ./imgs/patterns/文件夹中的图像，以及对某些托管jquery（1.9？）的引用。（和身体标签）

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

Chart.js饼图：如何为细分设置背景图像

1 个答案: