我怎样才能创建一个"饼图"在HTML5?

时间:2014-03-25 17:34:07

标签: javascript html5 canvas charts pie-chart

我试图创建一个"饼图"使用画布对象,但我想用图像而不是用颜色填充每个切片。你觉得这可能吗?我也尝试使用" createPattern"但它也不起作用。有什么建议吗?

在这里你可以找到我已经完成的一些代码,但它正在用颜色填充切片。

        var color = ["#ccc", "#222", "#fff", "#a61712", "#e42f13", "#2b6637", "#f9d90d", "#f4973a", "#002fba", "#800501"];
        var data = [10, 5, 28, 2, 20, 10, 5, 5, 10, 5];

        function getTotal(){
            var total = 0;
            for (var j = 0; j < data.length; j++) {
                total += (typeof data[j] == 'number') ? data[j] : 0;
            }
            return total;
        }

        function plotData() {
            var canvas;
            var ctx;
            var lastend = 0;
            var total = getTotal();

            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < data.length; i++) {
                ctx.fillStyle = color[i];
                ctx.beginPath();
                ctx.moveTo(200,150);
                ctx.arc(200, 150, 150, lastend,lastend+(Math.PI*2*(data[i]/total)),false);
                ctx.lineTo(200,150);
                ctx.strokeStyle = "#000";
                ctx.lineWidth = 5;
                ctx.stroke();
                ctx.fill();
                lastend += Math.PI*2*(data[i]/total);
            }
        }

        plotData();

1 个答案:

答案 0 :(得分:0)

您可以使用多种方法用图像或图案填充楔形物。

对于任一选项,您必须执行ctx.closePath,以使您的图像/图案保持在楔形的范围内。

执行closePath后,填充模式应该会有更多成功。 : - )

或者,设置由楔形创建的剪裁区域:

  • 保存未剪辑的上下文状态:ctx.save();
  • 创建你的楔形路径。
  • 执行ctx.clip(),所有新绘图只会在你的楔形内画出
  • drawImage您的图像或图案填充(使用剪辑,图像将限制为楔形)
  • 恢复未剪辑的上下文状态:ctx.restore();