如何为 Chart.js 中的每个区域应用不同的背景颜色

Question

在react-chartjs-2中

在折线图中，每个网格都应该有不同的背景颜色。

这个库可以实现吗？

折线图应该是这样的：

这是我的 Code/configuration:

const options = {
        responsive: true,
        scales: {
            y: {
                grid: {
                    backgroundColor: [
                        'rgba(36, 206, 0, 0.8)',
                        'rgba(255, 255, 0, .8)',
                        'rgba(255, 162, 0, 0.8)',
                        'rgba(36, 206, 0, 0.8)',
                    ],
                },
    };

感谢阅读。

Answer 1

可以使用an inline plugin来实现：

var GradientBgPlugin = {
  beforeDraw: function(chart, args, options) {
    const ctx = chart.ctx;
    const canvas = chart.canvas;
    const chartArea = chart.chartArea;

    // Chart background
    var gradientBack = canvas.getContext("2d").createLinearGradient(0, 250, 0, 0);
    gradientBack.addColorStop(0, "rgba(213,235,248,1)");
    gradientBack.addColorStop(0.16, "rgba(213,235,248,1)");
    gradientBack.addColorStop(0.17, "rgba(226,245,234,1)");
    gradientBack.addColorStop(0.25, "rgba(226,245,234,1)");
    gradientBack.addColorStop(0.26, "rgba(252,244,219,1)");
    gradientBack.addColorStop(0.5, "rgba(252,244,219,1)");
    gradientBack.addColorStop(0.51, "rgba(251,221,221,1)");
    gradientBack.addColorStop(1, "rgba(251,221,221,1)");

    ctx.fillStyle = gradientBack;
    ctx.fillRect(chartArea.left, chartArea.bottom,
      chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
  }
};

而不只是将其包含在您的图表选项中：

plugins: [GradientBgPlugin]

结果应该类似于 this JSFiddle。

编辑

对于 Reach Charts JS 2，您需要对设置进行小的更改。你这样定义插件：

const plugins = [{
  beforeDraw: function(chart) {
    const ctx = chart.ctx;
    const canvas = chart.canvas;
    const chartArea = chart.chartArea;

    // Chart background
    var gradientBack = canvas.getContext("2d").createLinearGradient(0, 250, 0, 0);
    gradientBack.addColorStop(0, "rgba(213,235,248,1)");
    gradientBack.addColorStop(0.16, "rgba(213,235,248,1)");
    gradientBack.addColorStop(0.17, "rgba(226,245,234,1)");
    gradientBack.addColorStop(0.25, "rgba(226,245,234,1)");
    gradientBack.addColorStop(0.26, "rgba(252,244,219,1)");
    gradientBack.addColorStop(0.5, "rgba(252,244,219,1)");
    gradientBack.addColorStop(0.51, "rgba(251,221,221,1)");
    gradientBack.addColorStop(1, "rgba(251,221,221,1)");

    ctx.fillStyle = gradientBack;
    ctx.fillRect(chartArea.left, chartArea.bottom,
      chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
  }
}];

比你这样插：

<Line data={data} plugins={plugins} />

您可以看到它在 CodeSandbox here 上运行良好。

Answer 2

您可以编写自定义内联插件，在图表区域绘制颜色。在选项部分，您可以放置一个对象，其中包含您想要的所有部分，从哪里到哪里以及它们需要的颜色

示例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [100, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      backgrounds: {
        hbars: [{
            from: 28,
            to: 100,
            color: "rgb(195, 230, 195)"
          },
          {
            from: 20,
            to: 28,
            color: "rgb(230, 220, 195)"
          },
          {
            from: 0,
            to: 20,
            color: "rgb(230, 195, 195)"
          }
        ]
      }
    }
  },
  plugins: [{
    id: 'backgrounds',
    beforeDraw: (chart, args, options) => {
      const {
        ctx,
        chartArea,
        scales: {
          y
        }
      } = chart;

      options.hbars.forEach((hBar) => {
        ctx.save();
        ctx.fillStyle = hBar.color;
        ctx.fillRect(chartArea.left, y.getPixelForValue(hBar.from), chartArea.right - chartArea.left, y.getPixelForValue(hBar.to) - y.getPixelForValue(hBar.from));
        ctx.restore();
      })
    }
  }]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

Answer 3

详细解释可以在这里找到：https://medium.com/@omi10859/alternative-background-lines-in-chartjs-a626ce4d3bcb

我们可以使用带有 chartjs 的注释插件来创建自定义元素。我们可以使用注释插件来做到这一点

import annotationPlugin from "chartjs-plugin-annotation";
import {Chart} from 'chart.js';
Chart.register(annotationPlugin);

此代码将在我们的图表中添加一个框

{
  type: 'box', #type of draw
  drawTime: 'beforeDraw', #this will decide background or foreground
  yMin: 5, #value min on y axis
  yMax: 10, #value max on y axis
  borderColor: 'rgb(242, 244, 248, 0.9)', #border color of the box
  borderWidth: 1, #boarder width for box
  backgroundColor: '#F2F4F8', #colour of the box
}
# add option while rendering
const options = {
  plugins: {annotation: {annotations: background_annotation}
}

此代码呈现此

如何为 Chart.js 中的每个区域应用不同的背景颜色

How to apply to different bground color for each area in Chart.js

javascript

css

canvas

reactjs

chart.js