Chart.js에 배경을 넣는 방법
소개
막대 그래프·꺾은선 그래프를 비롯해 다양한 그래프를 간단하게 그릴 수 있는 Chart.js.
설정을 하면 커스터마이즈도 가능합니다. 그러나이 모듈에는 심각한 단점이 있습니다 ...
쭉, 그래프에 배경을 넣을 수 없다! ! !
플러그인을 사용하지 않는다면 스스로 캔버스에 그릴 수밖에 없습니다.
플러그인을 늘리고 싶지 않다고 하는 분을 위해서, canvas 정보의 취득·조작의 방법을 써 남깁니다.
운영 환경
준비
여기는 할 수 있는 것 전제이므로 간단한 설명만으로 합니다.
우선은 그래프를 그리기 위한 장소 만들기. body 태그에 canvas 태그 만들기.
body 태그
<body>
<canvas id="temperatureChart"></canvas>
</body>
이번에는 꺾은 선 그래프를 그립니다. jQuery와 chart.js를 읽고 최소한의 설정을합니다.
스크립트 태그
<script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
$(function() {
var config = {
type: "line",
data: {
labels: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
datasets: [{
label: "最高気温",
lineTension: 0,
borderColor: "#000000",
fill: false,
data: [9.6, 10.4, 13.6, 19.0, 22.9, 25.5, 29.2, 30.8, 26.9, 21.5, 16.3, 11.9]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: -5,
max: 35
}
}]
}
}
};
var ctx = $("#temperatureChart").get(0).getContext("2d");
var lineChart = new Chart(ctx, config);
});
</script>
이것으로 준비는 OK입니다.
연간 기온을 나타내는 그래프가 완성.
배경 그리기
여기부터가 본제가 됩니다.
하고 있는 일은, canvas 정보를 취득해 canvas 조작을 하고 있습니다.
먼저 배경 그리기를 위한 함수를 준비합니다. 인수
target에는 캔버스 정보 (변수 ctx)가 들어 있습니다. target.scales 안에는 캔버스에 그려지는 것의 정보가 들어 있습니다. 예를 들어 target.scales["x-axis-0"].getPixelForValue("3月") 에서 3월의 x 좌표를 얻을 수 있습니다.정보를 얻으면
fillStyle · fillRect()를 사용하여 사각형을 그립니다.아래
drawBackground()는 필요한 좌표 정보를 검색하고 canvas를 조작하는 함수입니다.drawBackground()
function drawBackground(target) {
var xscale = target.scales["x-axis-0"];
var yscale = target.scales["y-axis-0"];
var left = xscale.left;
var high_top = yscale.getPixelForValue(35);
var high_height = yscale.getPixelForValue(25) - high_top; // 夏日
var low_top = yscale.getPixelForValue(0);
var low_height = yscale.getPixelForValue(-5) - low_top; // 真冬日
// 赤い範囲
ctx.fillStyle = "rgba(255, 0, 100, 0.2)";
ctx.fillRect(left, high_top, xscale.width, high_height);
// 青い範囲
ctx.fillStyle = "rgba(0, 100, 255, 0.2)";
ctx.fillRect(left, low_top, xscale.width, low_height);
}
여기까지 할 수 있으면 완성도 동연입니다.
방금 정의한
config에 plugins를 추가하고 beforeDraw에서 호출합니다.var config = {
plugins: [{
beforeDraw: drawBackground
}],
// 以下省略
}
네, 완성! ! !
배경은 캔버스에 사각형을 그릴 뿐이므로 이미지를 넣는 것도 가능하네요.
보충
options.animation.onComplete 에서 방금 만든 함수를 호출하면 그래프 위에 배경을 그려 버리므로 주의가 필요합니다.반대로 말하면, 배경이 아니라 그래프 위에 무언가를 그리고 싶은 경우는
onComplete 쪽이 좋네요.
Reference
이 문제에 관하여(Chart.js에 배경을 넣는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/piyox2/items/1a932bdcd7a132665056텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
