在页面上添加div元素时,图表消失了

时间:2018-07-16 16:01:38

标签: javascript chart.js

我在div#cloud-container中有两个chartjs canvas元素。现在,我正在尝试向页面添加div#related-words,但是由于某种原因,它使图表无法呈现。将其添加到div#root-container [#cloud-container的父级]或div#cloud-container不起作用。我正在通过文本操作(element.innerHTML = '<div id="related-words">...')直接添加它。有人可以帮我吗?

chartjs使用的两个画布都封装在各自的div中。

编辑:这是添加图表和div的代码:

[...document.querySelectorAll('text')].filter(x=>x!==e.target).forEach(e=>{e.style.animation = 'moveoffscreen 4s forwards'});
document.getElementById('cloud-container').innerHTML += `<button onclick="cloud(Object.entries(data.tfidf).sort((a,b)=>b[1]-a[1]).slice(0, 100 + 1).map(e=>{return{'key': e[0], 'value': e[1]}}))" style="color: white; background-color: #007bff; border-color: #007bff; font-size: 1rem; border-radius: .25rem; position: absolute; top: 75px; left: 50px; width: 200px; height: 30px;">Back to Wordcloud </button>
<button onclick="website_display(data.specifics)" style="color: white; background-color: #007bff; border-color: #007bff; font-size: 1rem; border-radius: .25rem; position: absolute; top: 110px; left: 50px; width: 200px; height: 60px;">Display websites with this word in them</button>`;
document.getElementById('cloud-container').appendChild(Object.assign(document.createElement('div'), {id: 'chart-occurence-container'}));
document.getElementById('cloud-container').appendChild(Object.assign(document.createElement('div'), {id: 'chart-frequency-container'}));
document.getElementById('chart-occurence-container').appendChild(Object.assign(document.createElement('canvas'), {id: 'chart-occurence'}))
document.getElementById('chart-frequency-container').appendChild(Object.assign(document.createElement('canvas'), {id: 'chart-frequency'}))

e.target.setAttribute('transform', 'translate(0,0)rotate(0)');
fetch('http://127.0.0.1:5000/relatedWords?querystring=' + last_searched + '&wordSearch=' + e.target.innerHTML)
.then(res=>res.ok ? res.json() : console.error('http error ' + res.status))
.then(obj=>document.body.innerHTML += '<div id="related-words"><b><u>Related Words</u></b><br>' + obj.join('<br>') + '</div>');

0 个答案:

没有答案