gpt4 book ai didi

javascript - ChartJS 根据数据不同背景渐变(折线图)

转载 作者:行者123 更新时间:2023-12-01 01:38:17 24 4
gpt4 key购买 nike

我正在尝试使用 ChartJS 折线图创建看起来像这样的东西。我已经让顶部渐变按我想要的方式工作,只是找不到一种方法来让底部渐变在我的数据值低于 0 时发生变化。

我尝试过根据我的数据使用一系列不同的背景颜色,并且尝试使用插件 beforeDraw 来更改背景颜色(它将它们全部更改为相同的颜色)。

example

最佳答案

Chart.js 问题 #3071 Multiple fill colors for line chart似乎符合你的目标。 official response是使用 CanvasGradient 。幸运的是,“berosoboy”有 posted an inline plugin去做这个。下面包含一个工作示例。我对其进行了稍微修改以删除对 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 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>

关于javascript - ChartJS 根据数据不同背景渐变(折线图),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52636353/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com