Chart.js - 同一画布上的多个甜甜圈图表 [英] Chart.js - Multiple Doughnut Charts on same Canvas
问题描述
我试图通过在同一画布上多次初始化Chart.js来模拟多层圆环图。当时只有一个图表可见。当你将鼠标悬停在其位置上时，另一个将会显示...
I´m trying to simulate a multi layer doughnut chart by initializing Chart.js multiple times over same canvas. There is only one chart visible at the time. The other will be visible when you hover over its position…
有人知道如何让两者同时显示吗？
Does somebody know how to make both visible at the same time?
这是我的代码：
<!doctype html>
<html>
<head>
<title>Doughnut Chart</title>
<script src="../Chart.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
#canvas-holder-1{
position: fixed;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
</style>
</head>
<body>
<div id="canvas-holder-1">
<canvas id="chart-area" width="500" height="500"/>
</div>
<script>
var doughnutData = [
{
value: 20,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red",
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 30,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var doughnutData2 = [
{
value: 10,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red",
},
{
value: 100,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 20,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 60,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive : false,
animateScale: false,
animateRotate:false,
animationEasing : "easeOutSine",
animationSteps : 80,
percentageInnerCutout : 90,
});
myDoughnut.outerRadius= 200;
window.myDoughnut2 = new Chart(ctx).Doughnut(doughnutData2, {
responsive : false,
animateScale: false,
animateRotate:false,
animationEasing : "easeOutSine",
animationSteps : 80,
percentageInnerCutout : 90
});
};
</script>
</body>
</html>
谢谢，
Jochen
Thanks, Jochen
推荐答案
有2个画布元素，并使用CSS将它们一个放在另一个上面。内部帆布具有内部甜甜圈，并且具有圆形边框，使得它尽可能少地覆盖外部甜甜圈。
Have 2 canvas elements and position them one over the other using CSS. The inner canvas has the inner doughnut and has rounded borders so that it covers up as little of the outer doughnut as possible.
预览
HTML
<div id="w">
<canvas id="d1" height="400" width="400"></canvas>
<canvas id="d2" height="320" width="320"></canvas>
</div>
CSS
#w {
position: relative;
height: 400px;
width: 400px;
}
#d1, #d2 {
position: absolute;
}
#d1 {
top: 0px;
left: 0px;
}
#d2 {
border-radius: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
小提琴 - https://jsfiddle.net/rhLxawt5/
此时我们有一个看起来相当不错的饼图不重叠的甜甜圈，但我们的工具提示将被剪掉，因为它们仍然是各自画布的一部分。
At this point we have a reasonably decent looking pie chart with non overlapping doughnuts, however our tooltips will get clipped off because they are still part of their respective canvases.
我们可以通过编写customTooltips函数来使用div而不是在画布中绘制矩形来解决这个问题。
We can work around this by writing a customTooltips function to use a div instead of drawing a rectangle within the canvas.
小提琴 - https://jsfiddle.net/rca0ync3/
这篇关于Chart.js - 同一画布上的多个甜甜圈图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
