我试图在 Chart.js 中放置矩形来制作上下范围/级别,如图所示
虽然我可以通过在这个例子中画两条线来实现
var ctx = document.querySelector("#myChart").getContext('2d');
Chart.pluginService.register({
afterDraw: function(chart) {
if (typeof chart.config.options.lineAt != 'undefined') {
var lineAt = chart.config.options.lineAt;
var ctxPlugin = chart.chart.ctx;
var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
ctxPlugin.strokeStyle = "green";
ctxPlugin.beginPath();
lineAt = 102;
ctxPlugin.moveTo(xAxe.left, lineAt);
ctxPlugin.lineTo(xAxe.right, lineAt);
ctxPlugin.moveTo(xAxe.left, lineAt-33);
ctxPlugin.lineTo(xAxe.right, lineAt-33);
ctxPlugin.stroke();
}
}
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Dec"],
datasets: [{
label: 'Findings',
data: [0,45],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
lineAt: 15,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
stepValue: 20,
max: 60,
min: 0
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
请在这里分享您的建议:http://jsfiddle.net/nikleshraut/ad2fsefe/
最佳答案
已经有一个 Chart.js 插件,名为 chartjs-plugin-annotation ,通过它您可以轻松实现这一目标。
使用该插件,您需要创建一个框注释(矩形),如下所示:
options: { //your chart options
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
yScaleID: 'y-axis-0',
yMin: 40,
yMax: 50,
backgroundColor: 'rgba(0, 255, 0, 0.1)'
}]
}
}
注意:这是绘制该矩形所需的最少选项, 您可以找到更多选项here .
这是一个working fiddle .
关于javascript - 如何在chart.js中制作矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47108389/