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>