【JavaScript】 Vue-chartjs를 사용하기 시작하는 - 구현 편
공부 노드를 메모합니다.
Chart.js의 공식 사이트 : htps //w w. 찬 rtjs. rg/
Chartjs를 도입하는 방법 :
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
개발 디렉토리내, npm로 이하의 커멘드로 인스톨 한다.
(독립형 버전, 번들 버전 모두 설치됨)
$ npm install chart.js --save
아래의 node_modules 모듈과 pacage-lock.json 패키지가 생성됩니다.
독립형 버전과 번들 버전
독립형 버전
파일:
dist/Chart.js
dist/Chart.min.js
(시간축을 사용하려면 Moment.js를 설치해야 함)
번들판(시간축을 사용 가능.Moment.js 인스톨 불필요.)
파일:
dist/Chart.bundle.js
dist/Chart.bundle.min.js
필요한 경우 path를 확인하고 index.html 파일에 도입합니다. 예: Chart.js
<script src="node_modules/chart.js/dist/Chart.js"></script>
위의 설정이 준비되면 예제 코드를 연습합니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部スクリプト方法 -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> -->
<!-- インストール方法 -->
<script src="node_modules/chart.js/dist/Chart.js"></script>
</head>
<body>
<p>chart_</p>
<!-- canvas要素を設置 -->
<canvas id="myChart" width="400" height="400"></canvas>
<script>
// 要素またはコンテキストを取得
var ctx = document.getElementById("myChart");
// チャートタイプをインスタンスかする
var myChart = new Chart(ctx, {
// 棒グラフ
type: 'bar',
// データを設置
data: {
// データのラベル
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
// 凡例
label: '# of Votes',
// データの量
data: [12, 19, 3, 5, 2, 3],
// 各データの色
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
// 棒枠色
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
// 棒枠線の厚さ
borderWidth: 1
}]
},
// オプション
options: {
// スケール設定
scales: {
// 縦スケールを設定
yAxes: [{
ticks: {
// ゼロから表示
beginAtZero:true
}
}]
}
}
});
</script>
</body>
</html>
Reference
이 문제에 관하여(【JavaScript】 Vue-chartjs를 사용하기 시작하는 - 구현 편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Qiu/items/9aed9af8e8aa8c0ab1ce텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
