ChartJS React折线图背景填充

h9vpoimq  于 2023-08-05  发布在  Chart.js
关注(0)|答案(1)|浏览(174)

我在React应用程序中使用Chart.js库创建了一个折线图。折线图应用了背景填充,但我遇到了一个问题,填充覆盖了0和第一个数据点之间的y轴边界。我希望边框被绘制在背景色上,这样它就可以被看到。

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const Graph = ({ chartData, chartColour, chartFillColour }) => {

  const options = {
    plugins: {
      legend: {
        display: false,
      }
    },
    scales: {
      x: {
        grid: {
          display: true,
          drawBorder: true,
          drawOnChartArea: false,
        },
        ticks: {
          display: true,
        }
      },
      y: {
        grid: {
          display: false,
          drawBorder: true,
          drawOnChartArea: false,
        },
        ticks: {
          display: true,
        }
      }
    }
  }

  const data = {
    labels: chartData.labels,
    datasets: [
      {
        data: chartData.data,
        backgroundColor: chartFillColour,
        borderColor: chartColour,
        pointRadius: 0,
        fill: true,
      }
    ]
  }

  return chartData.labels ? <Line data={data} options={options}/> : null;
}

export default Graph;

字符串
有没有办法确保边框画在背景色上?任何帮助或建议将不胜感激。谢谢你,谢谢

bfhwhh0e

bfhwhh0e1#

您可以将fillerPlugin的drawTime设置为beforeDraw,以便它在chart.js绘制任何自己的组件之前绘制填充。
https://www.chartjs.org/docs/4.3.0/charts/area.html#configuration

new Chart(ctx, {
    data: {
        datasets: []
    },
    options: {
        plugins: {
            filler: {
                drawTime: 'beforeDraw'
            }
        }
    }
});

字符串

相关问题