chart.js로 꺾은 선형 차트 만들기
개요
chart.js에서 꺾은선형 차트를 만듭니다.
샘플
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Line Chart Test</title>
<script src="Chart.min.js"></script>
<script language="JavaScript"><!--
function displayLineChart() {
var data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
label: "Prime and Fibonacci",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
}
]
};
var ctx = document.getElementById("lineChart").getContext("2d");
var options = { };
var lineChart = new Chart(ctx).Line(data, options);
}
--></script>
</head>
<body onload="displayLineChart();">
<div class="box">
<canvas id="lineChart" height="450" width="800"></canvas>
</div>
</body>
</html>
Gist
Chart.js 꺾은선형 그래프 샘플 Gist
데모
Chart.js 꺾은선형 그래프 샘플 데모
외부 자료
chart.js docs
Reference
이 문제에 관하여(chart.js로 꺾은 선형 차트 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tbpgr/items/3ab4f8771a1848d8b13b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
