ReactJS中混合条形图的chartjs线性渐变问题不是为每个单独的条形计算的

IT技术 reactjs chart.js react-chartjs-2
2021-05-19 11:18:40

我们的要求是将条形图呈现为预期图像。我们正在使用 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, 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,
            xAxisID: "x1",
            data: data[1].data,
            backgroundColor:"rgb(255, 159, 64)",
            barPercentage: 1,
          },
          {
            label: data[2].type,
            xAxisID: "x2",
            data: data[2].data,
            backgroundColor: gradient,
            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>

1个回答

所述插件核心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, 0, 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,
        xAxisID: "x1",
        data: data[1].data,
        backgroundColor: "rgb(255, 159, 64)",
        barPercentage: 1
      },
      {
        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>

其它你可能感兴趣的问题
上一篇热重载不适用于我的 webpack 5 react项目 下一篇使用 Draft.js 的 React 和 Electron：“未定义全局”