ChartJS different background gradient depending on data (line graph)(ChartJS 不同的背景渐变取决于数据(折线图))
问题描述
我正在尝试使用 ChartJS 折线图创建看起来像这样的东西.我的顶部渐变可以按我的意愿工作,但当我的数据值低于 0 时,我找不到让底部渐变发生变化的方法.
I am trying to create something that looks like this using ChartJS line graph. I've got the top gradient working as I want, I just cannot find a way to get the bottom gradient to change when my data value is below 0.
我尝试使用基于我的数据的不同背景颜色的数组,并且我尝试使用插件 beforeDraw 来更改背景颜色(它将它们全部更改为相同的颜色).
I've tried using an array of different background colors based on my data and I have tried using plugin beforeDraw to change the background color (it changed them all to the same color).
推荐答案
Chart.js 问题 #3071 折线图的多种填充颜色 似乎符合您的目标.官方回应是使用 CanvasGradient.幸运的是,berosoboy"发布了一个内联插件来做这.下面包括一个工作示例.我稍作修改以删除对 window.myColors
的引用.
Chart.js issue #3071 Multiple fill colors for line chart seems to match your objective. The official response is to use a CanvasGradient. Fortunately, 'berosoboy' has posted an inline plugin to do this. A working example is included below. I've modified it slightly to remove references to window.myColors
.
let posColour = 'rgba(0, 255, 0, .1)',
negColour = 'rgba(255, 0, 0, .1)',
myBarChart = new Chart(document.getElementById('chart'), {
type: 'line',
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
datasets: [{
label: 'Series1',
data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1]
}]
},
options: {
maintainAspectRatio: false
},
// source: https://github.com/chartjs/Chart.js/issues/3071#issuecomment-371001496
plugins: [{
beforeRender: function(c, options) {
var dataset = c.data.datasets[0];
var yScale = c.scales['y-axis-0'];
var yPos = yScale.getPixelForValue(0);
var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
gradientFill.addColorStop(0, posColour);
gradientFill.addColorStop(yPos / c.height - 0.01, posColour);
gradientFill.addColorStop(yPos / c.height + 0.01, negColour);
gradientFill.addColorStop(1, negColour);
var model = c.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].$filler.el._model;
model.backgroundColor = gradientFill;
}
}]
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
Chart.js v3.x 支持本机:
Chart.js v3.x supports this natively:
let posColour = 'rgba(0, 255, 0, .1)',
negColour = 'rgba(255, 0, 0, .1)',
myBarChart = new Chart(document.getElementById('chart'), {
type: 'line',
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
datasets: [{
label: 'Series1',
data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1],
fill: {
target: 'origin',
above: posColour,
below: negColour
}
}]
},
options: {
maintainAspectRatio: false
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<canvas id="chart"></canvas>
这篇关于ChartJS 不同的背景渐变取决于数据(折线图)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:ChartJS 不同的背景渐变取决于数据(折线图)
基础教程推荐
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01