如何解决ReactJS 中混合条形图的 chartjs 线性渐变问题不是针对每个单独的条形图计算的
我们的要求是将条形图呈现为 Expected Image。我们正在使用 chartJs 库来呈现图表。我们能够渲染条形图,但对于我们需要显示的条形图之一 背景颜色作为渐变。为了实现这一点,我们使用了以下代码片段: 但它呈现为 Rendered graph。你能帮我按预期渲染图表吗? JSFiddleLink
const data = [{
type: "Sample 1",data: [600,400,200,800]
},{
type: "Sampel 2",data: [700,300,600,600]
},{
type: "Total",data: [1300,700,800,1400]
}];
const gradient = document.getElementById('myChart').getContext('2d').createLinearGradient(0,250,0);
gradient.addColorStop(1,'#acd7fa')
gradient.addColorStop(0.4,'#FFFFFF')
new Chart('myChart',{
type: "bar",data: {
labels: ["A","B","C","D"],datasets: [
{
label: data[0].type,xAxisID: "x1",data: data[0].data,// fillColor: background_1,// highlightFill: background_2,backgroundColor: "rgb(54,162,235)",// backgroundColor: background_1,barPercentage: 1,},{
label: data[1].type,data: data[1].data,backgroundColor:"rgb(255,159,64)",{
label: data[2].type,xAxisID: "x2",data: data[2].data,backgroundColor: gradient,],options: {
legend: {
labels: {
filter: item => item.text != 'Total'
}
},scales: {
yAxes: [{
ticks: {
min: 0,stepSize: 200
}
}],xAxes: [{
id: 'x1'
},{
id: 'x2',display: false,offset: true
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="150"></canvas>
解决方法
Plugin Core API 提供了一系列可用于执行自定义代码的钩子。您可以使用 afterLayout
钩子为第三个 dataset
(总数)的每个值创建不同的梯度。
请在下面查看您修改后的代码,看看它是如何工作的。您还可以参考此 StackBlitz,其中说明了如何使用 react-chartjs-2
完成此操作。
const data = [
{ type: "Sample 1",data: [600,400,200,800] },{ type: "Sampel 2",data: [700,300,600,600] },{ type: "Total",data: [1300,700,800,1400] }
];
new Chart('myChart',{
type: "bar",plugins: [{
afterLayout: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let yAxis = chart.scales["y-axis-0"];
let yBottom = yAxis.getPixelForValue(0);
let dataset = chart.data.datasets[2];
dataset.backgroundColor = dataset.data.map(v => {
let yTop = yAxis.getPixelForValue(v);
let gradient = ctx.createLinearGradient(0,yBottom,yTop);
gradient.addColorStop(0.4,'#FFFFFF');
gradient.addColorStop(1,'#acd7fa');
return gradient;
});
ctx.restore();
}
}],data: {
labels: ["A","B","C","D"],datasets: [{
label: data[0].type,xAxisID: "x1",data: data[0].data,backgroundColor: "rgb(54,162,235)",barPercentage: 1
},{
label: data[1].type,data: data[1].data,backgroundColor: "rgb(255,159,64)",{
label: data[2].type,xAxisID: "x2",data: data[2].data,barPercentage: 1
}
]
},options: {
legend: {
labels: {
filter: item => item.text != 'Total'
}
},scales: {
yAxes: [{
ticks: {
min: 0,stepSize: 200
}
}],xAxes: [{
id: 'x1'
},{
id: 'x2',display: false,offset: true
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="150"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。