Chart.js добавить пользовательское название, субтитры, графику

Question

Я использую Chart.js для проекта (http://www.chartjs.org/).

Кто-нибудь знает, как рисовать на самом деле новый материал, например название или добавить пользовательские изображения, добавить «маржу» в диаграмму?

Answer 1

Да.

Вы можете установить функцию обратного вызова onAnimationComplete ChartJs, чтобы позвонить пользовательский код рисования, когда 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>