chart.jsでデモを試してみました。📈 #javascriptcode
2022.11.18
おはようございます、朝が早いですねと言われますが、夜が早いだけです😅。
さて、今日はchart.jsのデモを試してみました。売上のグラフとかコレで作るのが一番じゃないかなと思うライブラリですね。動画で編集してみせたのは二箇所ですが、実際、業務で使用する場合は3箇所ほど変更して使用しないといけないのかなって。
そういう訳で、こちらのブログにソース・コードを貼り付けておきます。
const ctx = document.getElementById('myChart');
let data = [12, 19, 3, 19, 2, 3];
new Chart(ctx, {
type: 'bar',
data: {
labels: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6'],
datasets: [{
label: '# of Votes',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
x: {
beginAtZero: true
}
}
}
});
業務で変更しないといけない最低限3箇所はこちらです~😆。
- ラベル
- データーセットの中のラベル
- データーセットの中のデータ
上記の3箇所を売上のデータや何やらに使用することで活用できるかと思います。
タグ
12, 19, 2, 3, 39, bar, chart, const, ctx, data, document, getElementById, javascriptcode, JS, let, myChart, new, type, グラフ, コード, こちら, コレ, ソース, デモ, ブログ, ライブラリ, 一, 二, 今日, 使用, 動画, 場合, 変更, 夜, 実際, 朝, 業務, 編集, 訳,
Canvasで円がぐるぐる回る。
2019.03.09
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="ctx" ></canvas>
<script>
"use strict";
let x = 0,y = 0;
let xs = 300,ys = 300;
let xc = 1,yc = 1;
let ctx = document.querySelector("#ctx");
let canvas;
ctx.width = window.screen.width;
ctx.height = window.screen.height;
if(ctx.getContext)
{
canvas = ctx.getContext("2d");
setInterval(draw,77);
}
function draw(){
canvas.beginPath();
canvas.fillStyle = "#3399ff";
canvas.arc(x,y,35,0,Math.PI*2,true);
canvas.globalCompositeOperation = "xor";
canvas.fill();
x =((Math.sin (xc) * xs)) + 500;
y =(Math.cos(yc) * ys) + 500;
console.log(x + ":" + ctx.width);
console.log(y + ":" + ctx.height);
if(x < 0 || x > ctx.width)
{
xs*=-1;
}
if(y < 0 || y > ctx.height)
{
ys*=-1;
}
if(x<0)
{
x=0;
}
if(y<0)
{
y=0;
}
if(x > ctx.width)
{
x=ctx.width;
}
if( y > ctx.height)
{
y=ctx.height;
}
xc+=1
if(xc>360)
{
xc=0;
}
yc+=1
if(yc>360)
{
yc=0;
}
}
</script>
</body>
</html>
Canvasでぐるぐる円を廻す。
ガラクタコードが少しあります、最初違うコードを書いていたので
これを可変していろいろお試しください。
https://zip358.com/tool/demo5/js/index-3.html
タグ
0, 1, 300, body, Canvas, ctx, DOCTYPE, document, gt, head, Height, html, ID, let, lt, querySelector, screen, script, strict, use, Width, win, window, xc, xs, yc, YS, 円,