charts.jsレイヤードドーナツ円グラフ

Question

chart.jsを使用してレイヤードドーナツグラフを作成しようとしています。私は2つのレイヤーで作業していますが、なぜ3つ目のレイヤーが表示されないのかわかりません。

3番目のドーナツが表示されないのはなぜですか？

は

<div id="w"> 
<canvas id="d1" height="600" width="600"></canvas> 
<canvas id="d2" height="500" width="500"></canvas> 
<canvas id="d3" height="400" width="400" ></canvas> 

#w { 
    position: relative; 
    height: 600px; 
    width: 600px; 
} 

#d1, #d2, #d3 { 
    position: absolute; 
} 

#d3 { 
    position: absolute; 
} 

#d1 { 
    top: 0px; 
    left: 0px; 
} 

#d2 { 
    top: 8%; 
    left: 8%; 
} 

#d3 { 
    top: 11%; 
    left: 11%; 
} 

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" 
       } 

      ]; 

var doughnutData3 = [ 
       { 
        value: 20, 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: "Red", 
       }, 
       { 
        value: 90, 
        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" 
       } 

      ]; 


var ctx1 = $("#d1").get(0).getContext("2d"); 
var myChart1 = new Chart(ctx1).Doughnut(doughnutData, { 
    percentageInnerCutout: 90 
}); 

var ctx2 = $("#d2").get(0).getContext("2d"); 
var myChart2 = new Chart(ctx2).Doughnut(doughnutData2, { 
    percentageInnerCutout: 90 
}); 

var ctx3 = $("#d3").get(0).getContext("3d"); 
var myChart3 = new Chart(ctx3).Doughnut(doughnutData3, { 
    percentageInnerCutout: 90 
}); 

ご協力いただきありがとうございますではなく、最後のチャートの2Dコンテキストの3Dコンテキストを要求CodePen

Answer 1

についてはこちらを参照してください。だから、これは

var ctx3 = $("#d3").get(0).getContext("3d"); 
var myChart3 = new Chart(ctx3).Doughnut(doughnutData3, { 
    percentageInnerCutout: 90 
}); 

この

へ

var ctx3 = $("#d3").get(0).getContext("2d"); 
var myChart3 = new Chart(ctx3).Doughnut(doughnutData3, { 
    percentageInnerCutout: 90 
});