ブログにグラフを掲載するときは画像ファイル(JPG,GIF)を貼り付けていましたが、ChatGPTを使うことで、HTML形式に変換して掲載することが分りました。
ChatGPTの質問入力画面に下記のように入力することで可能です。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
a=20
b=30
c=50
d=60
上のデータを円グラフにして、htmlに書き出しして下さい
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>円グラフ</title>
<!-- Chart.js を読み込む -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- canvas 要素でグラフを描画する領域を作成 -->
<canvas id="myChart" width="400" height="400"></canvas>
<script>
// データ
var data = {
labels: ['a', 'b', 'c', 'd'],
datasets: [{
data: [20, 30, 50, 60],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4CAF50']
}]
};
// グラフを描画
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut', // 円グラフの種類
data: data
});
</script>
</body>
</html>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
プログラマーはこれからは大変楽になるのでは?
円グラフ