我们可以自定义canvasjs甜甜圈图到其他吗？

debugcn 发表于 Dev

穆罕默德（Mohamad）

如何在第一个图像中自定义canvasjs甜甜圈到第二个图像中的另一个甜甜圈？

在此处输入图片说明

这是第一个图表的代码：

window.onload = function() {
    chart = new CanvasJS.Chart("chartContainer2", {
        title: {
            text: "Title",
            verticalAlign: "top",
            horizontalAlign: "left"
        },
        data: [{
            type: "doughnut",
            startAngle: 20,
            dataPoints: [{
                y: 30,
                label: "one"
            }, {
                y: 30,
                label: "tow"
            }, {
                y: 50,
                label: " three "
            }]
        }]
    }), chart.render()
};

品牌

您将必须自定义源代码才能获得所需的图表。

CanvasJS拥有非商业用途的知识共享+归因许可。但是此许可证不允许对源代码进行任何修改。因此，您将必须购买商业许可证。我没有他们的商业许可证，因此无法为您进行所需的修改。

由于您仍然必须自定义修改CanvasJS，因此创建自己的自定义代码可能会更容易;-)

这是一些示例示例代码，用于计算和绘制甜甜圈图的弧线。添加文本标签以及一些lineTo连接器应该很容易。

和演示：http : //jsfiddle.net/m1erickson/UFPQz/

在此处输入图片说明

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    function DonutChart(cx,cy,radius,arcWidth,values,colors){

        // save incoming chart definition
        this.cx=cx;
        this.cy=cy,
        this.radius=radius;
        this.arcWidth=arcWidth
        this.colors=colors;
        this.arcRadians=[];

        // put spacing between each arc in the chart
        this.leadPadding=Math.PI/45; // 3 degrees lead padding on arcs

        // parallel arrays holding starting/ending angles of each arc
        this.startRadians=[];
        this.endRadians=[];

        // calc sum of all values
        var total=0;
        for(var i=0;i<values.length;i++){ total+=values[i]; }

        // calc starting & ending radian angles for each arc
        var PI2=Math.PI*2;
        var accumRadians=0;
        var starting=0;
        var ending=0;
        for(var i=0;i<values.length;i++){
            starting=ending+this.leadPadding;
            ending=starting+PI2*values[i]/total-this.leadPadding;
            this.startRadians.push(starting);
            this.endRadians.push(ending);
        }


    };
    // draw all the arcs for this chart
    DonutChart.prototype.drawArcs=function(){
        ctx.save();
        for(var i=0;i<this.startRadians.length;i++){
            ctx.beginPath();
            ctx.arc(this.cx,this.cy,this.radius,this.startRadians[i],this.endRadians[i]);
            ctx.lineWidth=this.arcWidth;
            ctx.strokeStyle=this.colors[i];
            ctx.stroke();
        }
        ctx.restore();
    }


    // TEST: draw the arcs for an example donut chart

    var arcs=new DonutChart(150,150,100,10,[250,360,280,250],['red','green','blue','gold']);

    arcs.drawArcs();


}); // end $(function(){});
</script>
</head>
<body>
    <h4>Example arcs for a donut chart</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。