javascript - 如何根据图表js中的值使用段属性为线条/边框颜色着色?
问题描述
我正在尝试根据值创建具有不同颜色的线条/边框颜色的图表,例如此图像,因此颜色会在某个点上方和下方发生变化。
我已经浏览了 chartjs 文档(https://www.chartjs.org/docs/latest/samples/line/segments.html)上的片段示例,但这是使用跳过和点,而我正在尝试这样做具有价值,我无法弄清楚。
这是我的代码,它在 ejs 文件中(只有来自 js 的差异是通过 ${} 传入 <%- %> 的变量):
<canvas id="LineChart" height="100"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"
integrity="sha512-asxKqQghC1oBShyhiBwA+YgotaSYKxGP1rcSYTDrB0U6DxwlJjU59B67U8+5/++uFjcuVM8Hh5cokLjZlhm3Vg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
var ctx=document.getElementById( 'LineChart' ).getContext( "2d" );
var myChart=new Chart( ctx, {
type: 'line',
data: {
labels: <%- JSON.stringify( labels )%>,
datasets: [ {
label: ['a','b','c','d'],
data: ['1','2','3','4'],
backgroundColor:'rgba(54, 162, 235, 0.5)',
borderColor: rgb( 255, 255, 255 ),
segment: {
borderColor: function black() {
if ( <%=maxValue%> >99) {
return 'black';
}
if ( <%=minValue%> >99) {
return 'red';
}
}
},
}],
}
});
</script>
这是chartjs网站上的相关示例代码,(供快速参考):
const skipped = (ctx, value) => ctx.p0.skip || ctx.p1.skip ? value : undefined;
const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;
borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)')
我将非常感谢任何帮助!非常感谢。
更新:我大部分都可以解决这个问题(我可以制作一个线性渐变,颜色停止在某个值上),但我面临的问题是选择 x/y 轴来获取像素值,因为我不能正确选择图表,我在遇到问题的地方发表了评论,如果有人可以看一下并建议我一些东西,那将是很大的帮助,这里是小提琴:jsfiddle.net/baozkrw1/1
另外,这里是快速查看的小提琴代码:
HTML:
<h1>Chart One</h1>
<canvas id="LineChart" height="100"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"
integrity="sha512-asxKqQghC1oBShyhiBwA+YgotaSYKxGP1rcSYTDrB0U6DxwlJjU59B67U8+5/++uFjcuVM8Hh5cokLjZlhm3Vg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
JS:
var ctx = document.getElementById('LineChart').getContext("2d");
let width, height, gradient;
function getGradient(ctx, chartArea) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (gradient === null || width !== chartWidth || height !== chartHeight) {
width = chartWidth;
height = chartHeight;
let y = 27; // I want this to be the pixel for value I pass, instead of hard value
// but I can't select y-axis like this:
// var yaxis=y.scales[ 'y-axis-0' ];
// as it says undefined, and if I do like this :
// const { ctx, canvas, scales: { x, y } }=chart;
// var xaxis=x.scales[ 'x-axis-0' ];
// It says chart not defined, which I think is because I am not making this a function and passing chart, and I can't figure out how to do it right.
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(y / chartHeight, 'black');
gradient.addColorStop(0.6, 'yellow');
gradient.addColorStop(0.9, 'red');
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(y / chartHeight, 'black');
gradient.addColorStop(0.6, 'yellow');
gradient.addColorStop(0.9, 'red');
}
return gradient;
}
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['10', '20', '30', '40', '50'],
datasets: [{
label: 'Hello',
data: ['1', '2', '3', '4', '5'],
backgroundColor: 'rgba(255, 255, 78, 1)',
borderColor: function(context, options) {
const chart = context.chart;
const {
ctx,
chartArea
} = chart;
if (!chartArea) {
return null;
}
return getGradient(ctx, chartArea);
},
}]
},
});
解决方案
您将获得函数正在评估的线段的起点和终点的两个点,p0
在p1
这里您可以像这样访问 y 值:val = ctx.p0.parsed.y;
现场示例:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
segment: {
borderColor: (ctx) => {
val = ctx.p0.parsed.y;
return val >= 15 ? 'green' : val >= 10 ? 'blue' : val >= 5 ? 'pink' : 'purple'
}
}
}]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
编辑:
根据我的评论,您与您的 非常接近pixelForValue
,您只需要将上下文也传递给您的渐变函数,并且不要使用 v2 默认 ID 来进行比例尺:
borderColor: function(context, options) {
const chart = context.chart;
const {
ctx,
chartArea
} = chart;
if (!chartArea) {
return null;
}
return getGradient(ctx, chartArea, chart);
}
function getGradient(ctx, chartArea, chart) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (gradient === null || width !== chartWidth || height !== chartHeight) {
width = chartWidth;
height = chartHeight;
let y2 = 27; // I want this to be the pixel for value I pass, instead of hard value
const { scales: { x, y } } = chart;
console.log(x.getPixelForValue(20), x.getPixelForValue(4))
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(y2 / chartHeight, 'black');
gradient.addColorStop(0.6, 'yellow');
gradient.addColorStop(0.9, 'red');
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(y2 / chartHeight, 'black');
gradient.addColorStop(0.6, 'yellow');
gradient.addColorStop(0.9, 'red');
}
return gradient;
}
但是您也可以选择使用值和颜色制作一组对象,并使用它来制作渐变:
var ctx = document.getElementById('LineChart').getContext("2d");
let width, height, gradient;
const getcolorStop = (val, max) => (val / max);
const colors = [{
val: 2,
color: 'pink',
},
{
val: 12,
color: 'purple',
},
{
val: 20,
color: 'green',
}
]
function getGradient(ctx, chartArea, chart) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (gradient === null || width !== chartWidth || height !== chartHeight) {
width = chartWidth;
height = chartHeight;
const {
scales: {
y: {
max
}
}
} = chart;
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
colors.forEach((color) => {
if (color.val > max) {
color.val = max;
}
gradient.addColorStop(getcolorStop(color.val, max), color.color);
});
}
return gradient;
}
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['10', '20', '30', '40', '50'],
datasets: [{
label: 'Hello',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(255, 255, 78, 1)',
borderColor: function(context, options) {
const chart = context.chart;
const {
ctx,
chartArea
} = chart;
if (!chartArea) {
return null;
}
return getGradient(ctx, chartArea, chart);
},
}]
},
});
<h1>Chart One</h1>
<canvas id="LineChart" height="100"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
推荐阅读
- r - 多个 group_by 闪亮的应用程序制作情节
- javascript - 如何在javascript中将计时器添加到引导进度条
- typescript - Google Analytics 在 Aurelia TypeScript 项目中没有按预期工作?
- angular - Angular8服务单元测试
- vue.js - Fullcalendar vue 组件和事件作为函数
- java - 休息服务发布调用不适用于 Spring Webclient
- javascript - 返回承诺一个函数链
- python - Selenium 中的 Python ElementClickInterceptedException
- flutter - Parent的LayoutBuilder调用太频繁,每次TextField发生变化
- r - 如何集成此功能以估计 Shiny 中的列线图分数?