Javascript 我们可以从中自定义canvasjs甜甜圈图表吗?
如何将第一张图片中的canvasjs甜甜圈自定义为第二张图片中的另一个 这是第一个图表的代码:Javascript 我们可以从中自定义canvasjs甜甜圈图表吗?,javascript,canvas,html5-canvas,canvasjs,Javascript,Canvas,Html5 Canvas,Canvasjs,如何将第一张图片中的canvasjs甜甜圈自定义为第二张图片中的另一个 这是第一个图表的代码: window.onload = function() { chart = new CanvasJS.Chart("chartContainer2", { title: { text: "Title", verticalAlign: "top", horizontalAlign: "left"
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连接器应该很容易 还有一个演示:
正文{背景色:象牙;}
画布{边框:1px纯红;}
$(函数(){
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
函数DonutChart(cx、cy、半径、弧宽、值、颜色){
//保存传入图表定义
这个.cx=cx;
这个.cy=cy,
这个。半径=半径;
这个.arcWidth=arcWidth
这个。颜色=颜色;
这个。弧度=[];
//在图表中的每个弧之间放置间距
this.leadPadding=Math.PI/45;//圆弧上的3度引线填充
//保持每个弧的起始角/终止角的平行阵列
这个.startRadians=[];
这个.endRadians=[];
//计算所有值的总和
var合计=0;
对于(var i=0;iYou应该首先发布您已经生成的代码,然后我们将能够帮助您
<!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>