Question

我已经尝试了Chart.js，ChartJS.js，Highchart.js以及jQuery的一些直接CSS更改，并且没有任何工作正常。这是我希望实现的目标：

enter image description here

我为我缺乏代码道歉，而且我不是在寻找任何人为我建立解决方案。我对谷歌没有任何好运，而且我没有创意。任何人都可以提出建议或指出我可能的解决方案吗？

由于

更新：这是尝试使用rotate（）

<div id="spectrumDoughnutWrapper">
    <canvas class="chart" id="spectrumDoughnut" width="150" height="150"></canvas>
</div>


buildChart(0);

$('spectrumDoughnut').click(function(){
    buildChart(20);
});

function buildChart(degree){
var ctx = document.getElementById("spectrumDoughnut").getContext("2d");

var data = [
    { value: 10, color:"#ad6262" },
{ value: 10, color:"#c26558" },
    { value: 10, color:"#c8896e" },
    { value: 10, color:"#d9bc78" },
    { value: 10, color:"#fdf57a" },
    { value: 10, color:"#b3c78f" },
    { value: 10, color:"#a3b476" },
    { value: 10, color:"#768b69" },
    { value: 10, color:"#6988b0" },
    { value: 10, color:"#698880" },
    { value: 10, color:"#8d95b9" },
    { value: 10, color:"#905e79" }
]

var options = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke : true,

//String - The colour of each segment stroke
segmentStrokeColor : "#fff",

//Number - The width of each segment stroke
segmentStrokeWidth : 1,

//The percentage of the chart that we cut out of the middle.
percentageInnerCutout : 75,

//Boolean - Whether we should animate the chart 
animation : true,

//Number - Amount of animation steps
animationSteps : 100,

//String - Animation easing effect
animationEasing : "easeOutBounce",

//Boolean - Whether we animate the rotation of the Doughnut
animateRotate : false,

//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale : false
}

ctx.rotate(degree);

new Chart(ctx).Doughnut(data,options);
}

Answer 1

您可以使用CSS转换（https://developer.mozilla.org/en-US/docs/Web/CSS/transform）。

这个想法是：

使用90度转换创建CSS
点击图表后，应用该CSS类（例如，调用CSS类旋转）

示例代码：

CSS

rotate {
  transform:rotate(90deg);
}

JS

$("#chart").click(
  $(this).addClass("rotate");
);

Answer 2

围绕中心点旋转涉及2个上下文变换

转换为旋转点：context.translate（centerX，centerY）;
按指定的弧度角旋转：context.rotate（90 * Math.PI / 180）;

这是代码和演示：http://jsfiddle.net/m1erickson/rL5aX/

<!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");
    ctx.lineWidth=20;

    var PI=Math.PI;
    var rotation=0;

    var arcs=[];
    arcs.push({cx:150,cy:150,radius:100,startAngle:-45,endAngle:45,color:"blue"});
    arcs.push({cx:150,cy:150,radius:100,startAngle:45,endAngle:135,color:"red"});
    arcs.push({cx:150,cy:150,radius:100,startAngle:135,endAngle:225,color:"gold"});
    arcs.push({cx:150,cy:150,radius:100,startAngle:225,endAngle:315,color:"green"});

    arcs.push({cx:150,cy:150,radius:75,startAngle:-43,endAngle:-2,color:"blue"});
    arcs.push({cx:150,cy:150,radius:75,startAngle:0,endAngle:45,color:"blue"});


    arcs.push({cx:150,cy:150,radius:75,startAngle:47,endAngle:88,color:"red"});
    arcs.push({cx:150,cy:150,radius:75,startAngle:90,endAngle:135,color:"red"});

    arcs.push({cx:150,cy:150,radius:75,startAngle:137,endAngle:180,color:"gold"});
    arcs.push({cx:150,cy:150,radius:75,startAngle:182,endAngle:225,color:"gold"});

    arcs.push({cx:150,cy:150,radius:75,startAngle:227,endAngle:272,color:"green"});
    arcs.push({cx:150,cy:150,radius:75,startAngle:275,endAngle:313,color:"green"});

    drawAll();

    function drawAll(){
        for(var i=0;i<arcs.length;i++){
            draw(arcs[i]);
        }
    }
    function draw(a){
        ctx.save();
        ctx.translate(a.cx,a.cy);
        ctx.rotate(rotation*PI/180);
        ctx.beginPath();
        ctx.arc(0,0,a.radius,a.startAngle*PI/180,a.endAngle*PI/180);
        ctx.strokeStyle=a.color;
        ctx.stroke();
        ctx.restore();
    }

    $("#rotate").click(function(){
        rotation+=90;
        drawAll();
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="rotate">Rotate</button>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[额外信用跟进]

这是一些未经测试的可能需要调整的代码，用于确定x，y是否在弧内

var arc1={
    cx:0,
    cy:0,
    innerRadius:50,
    outerRadius:70,
    startAngle:0,
    endAngle:Math.PI
}

function isPointInArc(x,y,arc){    
    var dx=x-arc.cx;
    var dy=y-arc.cy;
    var dxy=dx*dx+dy*dy;

    // test if x,y is between the inner and outer radii of the arc
    var rrOuter=arc.outerRadius*arc.outerRadius;
    var rrInner=arc.innerRadius*arc.innerRadius;
    if(dxy<rrInner || dxy>rrOuter){return(false);}

    // test if the angle of xy to centerpoint is inside the arc angle
    var angle=(Math.atan2(dy,dx)+PI2)%PI2;
    return(angle>=arc.startAngle && angle<=arc.endAngle);
}

祝你的项目好运！

如何构建一个在触发时旋转的双圆环图表

2 个答案: