Chart.js 添加自定义标题、副标题、图形
Chart.js add custom title, subtitle, graphics
我正在使用 Chart.js 进行项目 (http://www.chartjs.org/)。
有人知道如何利用实际的 canvas 新内容,例如标题或添加自定义图像,将 'margin' 添加到图表中吗?
是的。
您可以设置 ChartJs 的 onAnimationComplete
回调来在 ChartJs 完成它自己的绘图和动画时调用您的自定义绘图代码。
在该回调中,您可以获得 canvas context
(== 与您最初输入 ChartJS 的 canvas/context 相同)并使用该上下文绘制您想要的任何新自定义内容。
这是它如何工作的一个例子:
ChartJS 的图表内容没有原生 "padding"。获得一些填充的一种方法是将图表绘制到较小的内存中 canvas,然后将该内存中的 canvas 绘制到可见的 canvas 中,并带有偏移量以允许您想要的填充。
这是一个例子:
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>
我正在使用 Chart.js 进行项目 (http://www.chartjs.org/)。
有人知道如何利用实际的 canvas 新内容,例如标题或添加自定义图像,将 'margin' 添加到图表中吗?
是的。
您可以设置 ChartJs 的 onAnimationComplete
回调来在 ChartJs 完成它自己的绘图和动画时调用您的自定义绘图代码。
在该回调中,您可以获得 canvas context
(== 与您最初输入 ChartJS 的 canvas/context 相同)并使用该上下文绘制您想要的任何新自定义内容。
这是它如何工作的一个例子:
ChartJS 的图表内容没有原生 "padding"。获得一些填充的一种方法是将图表绘制到较小的内存中 canvas,然后将该内存中的 canvas 绘制到可见的 canvas 中,并带有偏移量以允许您想要的填充。
这是一个例子:
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>