Y轴颜色不同 [英] Y-Axis with different colors
本文介绍了Y轴颜色不同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试向Y轴添加不同的颜色，但没有成功.是否有可能达到附件图片显示之类的东西?
I have tried to add different colors to the Y-axis but without success. Is it possible to achive something like attached image shows?
在chartjs-plugin-annotation插件中，您可以设置背景，但不能设置颜色比例.
In the chartjs-plugin-annotation plugin you can set the background but not scale colors.
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset',
data: [1,2,3,4,5,6,7],
fill: false,
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Colored scale'
},
gridLines: { color: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(0, 0, 255, 1)'] }
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
</head>
<body>
<div style="width:75%;"><canvas id="canvas"></canvas></div>
</body>推荐答案
You can draw individual boxes directly on the canvas using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code.
在下面的代码片段中，我使用 beforeDraw 钩子分别绘制不同背景颜色的矩形.
In below code snippet, I use the beforeDraw hook to draw the rectangles of different background color each.
new Chart(document.getElementById('canvas'), {
type: 'line',
plugins: [{
beforeDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
ctx.fillStyle = 'green';
ctx.beginPath();
var yGreen = yAxis.getPixelForValue(3.5);
ctx.fillRect(xAxis.left - 6, yGreen, 6, yAxis.bottom - yGreen);
ctx.stroke();
ctx.fillStyle = 'orange';
ctx.beginPath();
var yOrange = yAxis.getPixelForValue(4.5);
ctx.fillRect(xAxis.left - 6, yOrange, 6, yGreen - yOrange);
ctx.stroke();
ctx.fillStyle = 'red';
ctx.beginPath();
var yRed = yAxis.getPixelForValue(7);
ctx.fillRect(xAxis.left - 6, yRed, 6, yOrange- yRed);
ctx.stroke();
ctx.restore();
}
}],
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset',
data: [1, 2, 3, 4, 5, 6, 7],
fill: false
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
gridLines: {
tickMarkLength: 15
},
ticks: {
padding: 6
},
scaleLabel: {
display: true,
labelString: 'Colored scale'
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90">这篇关于Y轴颜色不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
