javascript Chart.js - 同一画布上的多个圆环图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30866844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js - Multiple Doughnut Charts on same Canvas
提问by Jochen Fuchs
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…
我试图通过在同一画布上多次初始化 Chart.js 来模拟多层甜甜圈图。当时只有一张图表可见。当您将鼠标悬停在其位置上时，另一个将可见......
Does somebody know how to make both visible at the same time?
有人知道如何同时使两者可见吗？
Here is my code:
这是我的代码：
<!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>
Thanks, Jochen
谢谢，乔臣
回答by potatopeelings
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.
有 2 个画布元素，并使用 CSS 将它们一个放在另一个上。内部画布有内部甜甜圈，并具有圆形边框，以便尽可能少地覆盖外部甜甜圈。
Preview
预览
HTML
HTML
<div id="w">
<canvas id="d1" height="400" width="400"></canvas>
<canvas id="d2" height="320" width="320"></canvas>
</div>
CSS
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%);
}
Fiddle - https://jsfiddle.net/rhLxawt5/
小提琴 - 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.
在这一点上，我们有一个相当不错的饼图，没有重叠的甜甜圈，但是我们的工具提示会被剪掉，因为它们仍然是各自画布的一部分。
We can work around this by writing a customTooltips function to use a div instead of drawing a rectangle within the canvas.
我们可以通过编写一个 customTooltips 函数来使用 div 而不是在画布中绘制一个矩形来解决这个问题。
Fiddle - https://jsfiddle.net/rca0ync3/
回答by tonix
You can use multiple datasets, checkout the Chart JS demo page:
您可以使用多个数据集，请查看 Chart JS 演示页面：
http://www.chartjs.org/samples/latest/charts/doughnut.html
http://www.chartjs.org/samples/latest/charts/doughnut.html
Also, here is an example with multiple datasets and multiple labels too:
此外，这里还有一个包含多个数据集和多个标签的示例：
https://jsfiddle.net/moe2ggrd/1/
https://jsfiddle.net/moe2ggrd/1/
The important part:
重要的部分：
...
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Green", "Yellow", "Red", "Purple", "Blue"],
datasets: [{
data: [1, 2, 3, 4, 5],
backgroundColor: [
'green',
'yellow',
'red',
'purple',
'blue',
],
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
backgroundColor: [
'black',
'grey',
'lightgrey'
],
labels: [
'black',
'grey',
'lightgrey'
],
}, ]
},
...
Hope it helps someone who's trying to do the same thing.
希望它可以帮助那些试图做同样事情的人。
