Chart.js添加自定義標題，字幕，圖形

Question

我正在使用Chart.js作爲項目（http://www.chartjs.org/）。

有人知道如何在實際畫布上繪製新的東西，如標題或添加自定義圖像，向圖表添加「邊距」？

Answer 1

是的。

您可以設置ChartJs的onAnimationComplete回調打電話給你的自定義繪製代碼時ChartJs已經完成了它自己的繪圖和動畫。

在該回調函數中，您可以獲得canvas context（==最初提供給ChartJS的相同畫布/上下文），並使用該上下文繪製您所需的任何新的自定義內容。

這裏是它如何工作的例子：

Inserting percentage charts.js doughnut

ChartJS沒有一個天然的「填充」，以它的圖表內容。獲得某些填充的一種方法是將圖表繪製到較小的內存中，然後使用偏移量將該內存中的畫布繪製到可見的畫布上以便填充所需的填充。

這裏有一個例子：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var pieData = [ 
 
    { 
 
    value: 200, 
 
    color:"#F7464A", 
 
    highlight: "#FF5A5E", 
 
    label: "Red" 
 
    }, 
 
    { 
 
    value: 50, 
 
    color: "#46BFBD", 
 
    highlight: "#5AD3D1", 
 
    label: "Green" 
 
    }, 
 
    { 
 
    value: 100, 
 
    color: "#FDB45C", 
 
    highlight: "#FFC870", 
 
    label: "Yellow" 
 
    }, 
 
    { 
 
    value: 40, 
 
    color: "#949FB1", 
 
    highlight: "#A8B3C5", 
 
    label: "Grey" 
 
    }, 
 
    { 
 
    value: 120, 
 
    color: "#4D5360", 
 
    highlight: "#616774", 
 
    label: "Dark Grey" 
 
    } 
 

 
]; 
 

 
// create an in-memory canvas (c) 
 
var c = document.createElement("canvas"); 
 

 
// size it to your desired size (without padding) 
 
c.width=100; 
 
c.height=100; 
 

 
// make it hidden 
 
c.style.visibility='hidden'; 
 
document.body.appendChild(c); 
 

 
// create the chart on the in-memory canvas 
 
var cctx = c.getContext("2d"); 
 
window.myPie = new Chart(cctx).Pie(pieData,{ 
 
    responsive:false, 
 
    animation:false, 
 

 

 
    // when the chart is fully drawn, 
 
    // draw the in-memory chart to the visible chart 
 
    // allowing for your desired padding 
 
    // (this example pads 100 width and 50 height 
 
    onAnimationComplete:function(){ 
 
    ctx.drawImage(c,100,50); 
 
    ctx.fillText('Space to add something here with 50x100 padding',5,20); 
 
    ctx.fillText('Added Padding',5,90); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,100); 
 
    ctx.lineTo(100,100); 
 
    ctx.stroke(); 
 
    } 
 
});

body{ background-color: ivory; } 
 
canvas{border:1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas>