如何加载data-url获取的数据转换成图片，显示在div之中？

Question

这段代码核心如下所示，每次打开网页data_url返回的图片会加载在div中。<div id="detail_chart_cpu_load" chart_type="server_detail_load_chart" data_url="/monitor/servers/detail_json/codm-lobby-0003/cpu/7/" style="width: 100%; height:250px;"></div>正常显示大概是这样的现在要求div不能刷新，我用的ajax，先把data_url的数据弄过来，可以看到数据确实请求到了，如下图所示：现在问题来了，怎么把这个图片数据给弄到这个div上显示？或者哪位兄弟有更好的办法？不甚感激。

Answer 1

去找一个画图的插件吧，像echarts

Answer 2

用canvas

let canvas = document.getElementById( 'myCanvas' ),

    ctx = canvas.getContext( '2d' ),

    img = new Image();

img.src = '';

img.onload = function() {

    ctx.drawImage( img );             

};

每次修改时，只要重新赋值img.src。

Answer 3

直接用稳定的图表库吧；节省开发成本 百度ECharts