Chart.js을 사용하여 차트에 가로선을 그립니다. 그러나 나는 그것을 할 수 없다.Chart.js 한계선이있는 누적 막 대형 차트 그리기
나는이 example을 찾았지만 문제 라인과 바 차트는 "포인트"
var data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
initialize: function() {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
draw: function() {
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
console.log(this);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.startPoint+12, point.y);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(this.chart.width, point.y);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
lineAtIndex: 2
});
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<div>
<canvas id="LineWithLine" width="600" height="400"></canvas>
</div>
Chart.js 2에서이 작업을 수행 할 수있는 더 좋은 방법이 있나요? 아마도 꺾은 선형 차트와 막 대형 차트 조합을 사용하거나 그 잔인 함이 무엇입니까? 이 예에서
는 한계가 마이너스 값이 되니라 :
가 잘하면 내가이를 알아낼 수 있습니다 사람은, 당신이 아래 볼 수 있듯이 이미 CSS와 자바 스크립트를 사용하여이 차트를 만들었습니다 그것은 혼란 스러울 수있는 실제 라인 아래에 그 자체를 그렸습니다. 그러나 중요한 것은 제가 선택한 값으로 라인이 그려져 있다는 것입니다. 여전히이 문제가있는 경우 :