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="line_graph.js"></script>
</head>
<body>
<h1>Chart.js 折れ線グラフ</h1>
<canvas id="chart" height="200" width="400"></canvas>
<hr />
Dec/09/2021<p />
</body>
</html>
line_graph.js
// ----------------------------------------------------------------------
// line_graph.js
//
// May/23/2017
// ----------------------------------------------------------------------
jQuery (function ()
{
const config = {
type: 'line',
data: barChartData
}
const context = jQuery("#chart")
const chart = new Chart(context,config)
})
// ----------------------------------------------------------------------
const barChartData = {
labels : ["2010","2011","2012","2013","2014","2015","2016"],
datasets : [
{
label: "AA",
lineTension: 0,
data : [31,25,45,5,20,19,33]
},
{
label: "BB",
lineTension: 0,
data : [25,10,54,77,32,9,78]
}
]
}
// ----------------------------------------------------------------------
다음 버전에서 확인했습니다.
Chart.js v3.6.2
Reference
이 문제에 관하여(jQuery와 Chart.js로 꺾은 선형 차트 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ekzemplaro/items/3db297cc98a8e4bc7c35텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
