Chart.js에서 가로 막대를 표시하는 샘플
Chart.js + chartjs-plugin-annotation을 기본 html / js에서 호출합니다.
원래
업무상 Chart.js 을 사용하고 있어, y축 방향으로 선을 표시하고 싶지만 아무것도 가지 않으면 상담되었으므로, 그럼 최소한의 코드를 써 보려고 했습니다.
조건
업무에서 사용하고 있던 Chart.js는 v2.9.2이었습니다만, 이 샘플에서는 별로 신경쓰지 않고 v2.9계 마지막의 v2.9.4를 지정하고 있습니다.
결합하는 것은, 넷상의 정보를 종합해, chartjs-plugin-annotation 의 v0.5.7 을 조합하고 있습니다.
버전 차이를 결합하여 잘 작동하지 않는 것 같습니다.
코드
베이스로 한 것은 Getting Started | Chart.js 에 있는 코드입니다.
index_cdn.html<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js" integrity="sha256-eA+ych7t31OjiXs3fYU0iWjn9HvXMiCLmunP2Gpghok=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/chartjs-plugin-annotation.min.js" integrity="sha256-Olnajf3o9kfkFGloISwP1TslJiWUDd7IYmfC+GdCKd4=" crossorigin="anonymous"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//window.onload = function () {
var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
fill: false,
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [
{
id: 'hline',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 15,
borderColor: 'black',
borderWidth: 2,
label: {
backgroundColor: "red",
content: "Test Label",
enabled: true
},
},
]
}
}
});
//}
</script>
</body>
</html>
options의 부분을 덧붙여, chartjs-plugin-annotation 에 얽힌 정의를 더하고 있습니다.
빠진 것은 scaleID의 기술로, 문서상의 기술을 찾을 수 없습니다만 암묵적으로 (?)y축을 나타내는 ID가 정해져 있는지, 「scaleID: 'y-axis-0'」 쓸 때까지 전혀 가로 막대를 표시할 수 없었습니다.
실행 결과
html이 적당하기 때문에, 옆에 튀어 나와 버리고 있기 때문에, 제대로 canvas 요소를 div 요소로 묶어 말하는 이야기.
참고 정보
【Nuxt.js】Chart.js에서 그래프에 테두리를 그린다(chartjs-plugin-annotation)
이 예제에서는 scales > yAxes > id를 명시하고 annotation > annotations > scaleID를 명시합니다. (지금 설명을 쓰고 있는 시점에서 알지만, 조사하고 있는 중에는 좀처럼 눈치채지 못했다.)
Chart.js에서 선 그래프로 세로 막대를 쓰는 방법 - Qiita
세로 막대이지만, 요점은 같습니다. x←→y, vertical←→horizontal조차 알아차리면.
Reference
이 문제에 관하여(Chart.js에서 가로 막대를 표시하는 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/michieru/items/da7a6527a9136ea6ec9f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js" integrity="sha256-eA+ych7t31OjiXs3fYU0iWjn9HvXMiCLmunP2Gpghok=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/chartjs-plugin-annotation.min.js" integrity="sha256-Olnajf3o9kfkFGloISwP1TslJiWUDd7IYmfC+GdCKd4=" crossorigin="anonymous"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//window.onload = function () {
var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
fill: false,
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [
{
id: 'hline',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 15,
borderColor: 'black',
borderWidth: 2,
label: {
backgroundColor: "red",
content: "Test Label",
enabled: true
},
},
]
}
}
});
//}
</script>
</body>
</html>
Reference
이 문제에 관하여(Chart.js에서 가로 막대를 표시하는 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/michieru/items/da7a6527a9136ea6ec9f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
