如何将chart.js生成的折线图转为图片格式显示,恳请高手指点!!!

wuyongfang 发布于 2018/08/22 07:20
阅读 523
收藏 0

<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY leftMargin=0 topMargin=0>
<table width="500" height="500" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="111" align="center">
<div><canvas id="canvas1" width="500" height="500" style="display:none;></canvas></div>
<div id="img" width="500" height="500"></div>
 <script src="js/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("canvas1").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line', // line 表示是 曲线图,当然也可以设置其他的图表类型 如柱形图 : bar  或者其他
        data: {
            labels : ["1","2","3","4","5"], //按时间段 可以按星期,按月,按年
            datasets : [
                {
                    label: "123",  //当前数据的说明
                    fill: true,  //是否要显示数据部分阴影面积块  false:不显示
                    borderColor: "rgba(200,187,205,1)",//数据曲线颜色
                    pointBackgroundColor: "#fff", //数据点的颜色
                    data: [20, 30, 40, 30, 50],  //填充的数据
                },
            ]
        }
    });
 //从 canvas 提取图片 image
function convertCanvasToImage(canvas1) {
    //新Image对象,可以理解为DOM
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64编码的URL
    // 指定格式 PNG
    image.src = canvas1.toDataURL("image/png");
    return image;
}


//获取网页中的canvas对象,存在问题:应该是无法获取到canvas对象
var mycans=document.getElementById("canvas1").getContext("2d");
//调用convertCanvasToImage函数将canvas转化为img形式 
var img=convertCanvasToImage(mycans);
//将img插入容器
$('#img').append(img);
</script>
      </td>
  </tr>
</table>
</BODY></HTML>

加载中
0
tcxu
tcxu

//获取网页中的canvas对象,存在问题:应该是无法获取到canvas对象
var mycans=document.getElementById("canvas1").getContext("2d");

//只是 取画布 canvas1 的 画笔 myans

这里 是否应当改为:

var mycans=document.getElementById("canvas1");?

你的代码有误:  style="display:none;   
应当写成:   style="display:none"。

tcxu
tcxu
回复 @wuyongfang : 你的代码有误: style="display:none; 应当写成: style="display:none"。
w
wuyongfang
是要这样改,但还是不能正常显示
0
tcxu
tcxu

你的代码最终是要:将chart.js生成的折线图显示在另一个元素<div></div>里。何不采用便捷途径:改成显示在另一个 id 为 img 的<canvas></canvas>元素里? 这样,就不必 "转为图片格式"了。直接将"display:none" 的画布 canvas1 的数据,画在 id 为 img 的画布上就行了。

<html> 
<head> 
<style>
#img{
	width:300px;
	height:150px;
	border: solid medium #d3d3d3;
}
#canvas1{
	width:300px;
	height:150px;
	display:none;
}
</style>

</head>
<body> 
<canvas id="canvas1" width="300" height="150"></canvas>
<canvas id="img" style="border:1px solid #d3d3d3;"></canvas>
</body> 
<script>
    var c=document.getElementById("canvas1");
	var ctx=c.getContext("2d");
	ctx.beginPath();
	ctx.arc(100,75,50,0,2*Math.PI);
	ctx.fill();
	
	img =  document.getElementById("canvas1");
	gg = document.getElementById("img").getContext("2d");
	gg.drawImage(img,0,0);
	gg.arc(100,75,20,0, 2*Math.PI);
	gg.fillStyle="red";
	gg.fill();
	
</script>
</html> 

返回顶部
顶部