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 - 填充甜甜圈

回答

相关问题