Chart.jsで折れ線グラフを表示
code:script.js
/* Chart.js（Scrapbox上にソースは上げた）を使って、折れ線グラフを描画・表示する */
// debugger;
(function(){
async function loadScript(src) {
const script = document.createElement('script');
script.src = src;
const promise = new Promise(resolve => {
script.addEventListener('load', resolve);
});
document.body.appendChild(script);
return promise;
}
// import('https://cdn.jsdelivr.net/npm/chart.js').then( () => {
async function drawChartJS() {
// await loadScript('https://cdn.jsdelivr.net/npm/chart.js'); // ❌
await loadScript('https://scrapbox.io/api/code/cdn/Chart.js/20230209.js');
let chartElm = document.createElement('div');
chartElm.id = 'chart1';
document.body.appendChild(chartElm);
document.querySelector('#chart1').innerHTML = `
<div><canvas id="myChart"></canvas></div>
`;
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange',
datasets: [{
label: '# of Votes',
data: 12, 19, 13, 5, 5, 5,
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// });
}
console.info('7');
setTimeout(()=> drawChartJS(), 2000);
})();