jQuery と Chart.js で棒グラフを作る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>Chart.js 棒グラフ</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<script src="bar_graph.js"></script>
</head>
<body>
<h1>Chart.js 棒グラフ</h1>
<canvas id="chart" height="200" width="400"></canvas>
<hr />
Dec/09/2021<p />
</body>
</html>
bar_graph.js
// ----------------------------------------------------------------------
// bar_graph.js
//
// May/16/2017
// ----------------------------------------------------------------------
jQuery (function ()
{
const config = {
type: 'bar',
data: barChartData,
responsive : true
}
const context = jQuery("#chart")
const chart = new Chart(context,config)
})
// ----------------------------------------------------------------------
const barChartData = {
labels : ["青森","岩手","秋田","宮城","山形","福島"],
datasets : [
{
label: "1年目",
backgroundColor: "rgba(179,181,198,0.5)",
data : [25,45,5,20,19,33]
},
{
label: "2年目",
backgroundColor: "rgba(255,99,132,0.5)",
data : [10,54,77,32,9,78]
}
]
}
// ----------------------------------------------------------------------
Author And Source
この問題について(jQuery と Chart.js で棒グラフを作る), 我々は、より多くの情報をここで見つけました https://qiita.com/ekzemplaro/items/01f735d7fd83d160c8dc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .