2016-11-07 2 views
0

私はアプリを開発中です。このアプリは、Chart.jsを使用していくつかのドーナツチャートを表示します。ドーナツ「穴」を黄色で塗りつぶしています。ドーナツの穴の中に、私はイメージを配置したい。しかし、私は私の試みに失敗しました。現在、私はこのFiddleに見ることができる以下を持っています。Chart.JS - Fill Donut

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); 

どのようにドーナツ塗りをカスタマイズしますか?ありがとう!

+0

jsfiddle示す画像を更新しましたhttp://www.chartjs.org/docs/#chart-configuration-patternsは助けるのでしょうか?あなたが望むことをするように思えます。 – bryce

答えて

0

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);fiddle

を更新しました

myNewChart = new Chart(ct).DoughnutAlt(data, options);にこの回答を参照してください: 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); 

は、ドーナツグラフ

+0

最初は良く見えますが、チャートの弧の上にマウスを置くとすぐに背景色が消えます。 –

+0

私の答えを更新しました。あなたが参照できる別の質問へのリンクも追加しました。 – raz