未针对每个单独的条计算针对ReactJS中混合条形图的chartjs线性梯度问题 [英] Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars

问题描述

我们的要求是将条形图呈现为期望的图像.我们正在使用chartJs库来呈现图表.我们能够绘制条形图，但是对于其中一个条形图，我们需要显示背景颜色为渐变.为此，我们使用了以下代码片段:但它呈现为渲染图.您能帮我按预期方式绘制图表吗? JSFiddleLink

Our requirement is to render the bar chart as Expected Image. we are using chartJs library to render the chart. we are able to render the bar chart but for one of the bar we need to show the background color as gradient. To achieve this we used the following below code snippet: but it render as Rendered graph. Can you please help me out in rendering the chart as expected. 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>

推荐答案

插件核心API 提供了一系列可用于执行自定义代码的挂钩.您可以使用 afterLayout 钩子为第三个 dataset 的每个值(总计)创建不同的渐变.

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterLayout hook for creating different gradients for each value of the third dataset (the totals).

请在下面查看您修改后的代码，并查看其工作方式.您也可以参考 StackBlitz 说明了如何使用 react-chartjs-2 完成.

Please take a look at your amended code below and see how it works. You may also consult this StackBlitz that illustrates how it can be done with 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>

这篇关于未针对每个单独的条计算针对ReactJS中混合条形图的chartjs线性梯度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！