鍍金池/ 問答/HTML/ 如何加載data-url獲取的數(shù)據(jù)轉(zhuǎn)換成圖片，顯示在div之中？

如何加載data-url獲取的數(shù)據(jù)轉(zhuǎn)換成圖片，顯示在div之中？

這段代碼核心如下所示，每次打開網(wǎng)頁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>

正常顯示大概是這樣的
clipboard.png

現(xiàn)在要求div不能刷新，我用的ajax，先把data_url的數(shù)據(jù)弄過來，可以看到數(shù)據(jù)確實請求到了，如下圖所示：

clipboard.png

現(xiàn)在問題來了，怎么把這個圖片數(shù)據(jù)給弄到這個div上顯示？
或者哪位兄弟有更好的辦法？不甚感激。

回答
編輯回答
莫小染

去找一個畫圖的插件吧，像echarts

2017年10月17日 18:07
編輯回答
乖乖瀦

用canvas

let canvas = document.getElementById( 'myCanvas' ),
    ctx = canvas.getContext( '2d' ),
    img = new Image();

img.src = '';
img.onload = function() {
    ctx.drawImage( img );             
};

每次修改時，只要重新賦值img.src。

2017年1月8日 15:33
編輯回答
半心人

直接用穩(wěn)定的圖表庫吧；節(jié)省開發(fā)成本 百度ECharts

2018年1月6日 05:21