view source
JavaScript
var newCanvas = document.createElement('canvas');
var ctx = newCanvas.getContext('2d');
var wrap = document.getElementById('demo');
wrap.appendChild(newCanvas);
//document.body.insertAfter(newCanvas, wrap);
var datasets = [];
var iMax = 99;
var colsAry = [1,2,3,4,5,6,7,8,9];
for(let i = 0;i<iMax;i++){
var hue =360/(iMax*1.5) * i;
var data = colsAry.map((_) => Math.random()*60+i*10);
var dataset = {
label: '#appname-yyyymmdd-platform-'+i,
borderColor: `hsl(${hue},100%,50%)`,
backgroundColor: `hsl(${hue},100%,50%)`,
data: data,
lineTension: 0,
fill: false,
}
datasets.push(dataset);
}
var myChart = new Chart.Line(ctx, {
type: 'bar',
data: {
labels: colsAry,
datasets: datasets,
/*[
{
label: '# of Votes',
borderColor: `hsl(30,50%,50%)`,
backgroundColor: '#ff0000',
data: [12, 19, 3, 5, 2, 3],
lineTension: 0,
fill: false,
},
]
*/
},
options: {
legend: {
//display : false,
fullWidth : true,
position: 'left',
labels: {
filter : (legendItem, data) => {
//凡例が多数でグラフが潰れるのを防ぐ
return legendItem.datasetIndex % Math.floor(data.datasets.length/16) === 0 ||
legendItem.datasetIndex < 7;
},
usePointStyle : true,
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
CSS
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-chartjs/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。