Chart.JS - 填充甜甜圈

我正在開發一個應用程序。此應用程序使用Chart.js顯示一些甜甜圈圖表。我試圖用黃色填充甜甜圈「洞」。在甜甜圈洞裏，我想放置一張圖片。但是，我的努力沒有成功。目前，我有以下內容，可以在此看到Fiddle。Chart.JS - 填充甜甜圈

var data = [{ 
    value: 30, 
    color: "#F7464A" 
}, { 
    value: 50, 
    color: "#E2EAE9" 
}, { 
    value: 100, 
    color: "#D4CCC5" 
}, { 
    value: 40, 
    color: "#949FB1" 
}, { 
    value: 120, 
    color: "#4D5360" 
} 

] 

var options = { 
    animation: false, 
    backgroundColor: [ 
     'yellow' 
    ] 
}; 

//Get the context of the canvas element we want to select 
var c = $('#myChart'); 
var ct = c.get(0).getContext('2d'); 
var ctx = document.getElementById("myChart").getContext("2d"); 
/*************************************************************************/ 
myNewChart = new Chart(ct).Doughnut(data, options);

如何定製甜甜圈填充？謝謝！

來源

2016-11-07 user687554

並http://www.chartjs.org/docs/#chart-configuration-patterns幫助裏面的形象？可以爲ya撥弄它，但這似乎做你想要的 – bryce

options後補充一點：

Chart.types.Doughnut.extend({ 
    name: "DoughnutAlt", 
    draw: function() { 
     Chart.types.Doughnut.prototype.draw.apply(this, arguments); 

      //find the center point 
      var x = this.chart.canvas.clientWidth/2; 
      var y = this.chart.canvas.clientHeight/2; 

      //render the text 
      this.chart.ctx.beginPath(); 
      this.chart.ctx.arc(x,y,100,0,2*Math.PI); 
      this.chart.ctx.fillStyle = '#ffff00'; 
      this.chart.ctx.fill(); 
    } 
});

變化myNewChart = new Chart(ct).Doughnut(data, options);到myNewChart = new Chart(ct).DoughnutAlt(data, options);

更新fiddle

參考這樣的回答：canvas fill text vanishes when hovering over chartjs pie chart

UPDATE：

添加背景圖片：

var img = new Image(); 
img.src = 'path_to_image_source'; 

this.chart.ctx.drawImage(img,135,130);

更新jsfiddle顯示圓環圖

來源

2016-11-07 20:21:59 raz

首先看起來不錯，但只要你鼠標懸停在圖表的弧線上，背景顏色就會消失。 –

更新了我的答案。我還添加了一個鏈接，您可以參考另一個問題。 – raz

Chart.JS - 填充甜甜圈

回答

相關問題