我正在try 从我的图表中删除边框:

enter image description here

你看不到它,但也有x轴的边界.

我试过:

ScaleLineColor:"RGBA(0,0,0,0)"和

DrawBorde:False,

在网格上,但黑色边框还在那里,你能帮我吗? 我使用的是chart.js 4.3.0

const AreaChart = () => {
  const chartContainer = useRef(null);
  const data = [1,2,3];

  useEffect(() => {
    if (chartContainer.current) {
      const ctx = chartContainer.current.getContext("2d");

      const labels = ["Today","Day 2"];

      const myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: labels,
          datasets: [
            {
              label: "Data",
              data: data,
              fill: true,
            },
          ],
        },
        scaleLineColor: "rgba(0,0,0,0)",
        options: {
          scales: {
            x: {
              grid: {
                DrawBorde:False,
                display: false,
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            y: {
              grid: {
                DrawBorde:False,
                display: false,
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
          },
        },
      });

    }
  }, []);

  return (
    <div style={{ width: "100%", margin: "0 auto" }}>
      <canvas ref={chartContainer} />
    </div>
  );
};

export default AreaChart;

推荐答案

需要 for each 轴使用BORDER:{DISPLAY:FALSE}:

...
   scales: {
          x: {
            border: {
              display: false,
            },
            grid: {
              display: false,
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
          y: {
            border: {
              display: false,
            },
            grid: {
              display: false,
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },

Reactjs相关问答推荐

React onKeyUp不一致地使用快速Shift+键按压

如何使用Reducer更新全局变量

在Reaction中测试条件组件

TypeError:SearchProduct.get()获得了意外的关键字参数查询'

如何处理具有REACTION-REDUX状态的Nextjs路由警卫

使用筛选器的Primereact DataTable服务器端分页?

React-chartjs-2:红色和绿色之间的差距

如何在react 中过滤数组的数组?

我无法通过 useContext 显示值

无法使用react-hook-form和react-places-autocomplete在字段中输入值

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

useMemo 依赖项的行为

无法设置 null 的属性(设置src)

当我在 useEffect 中使用 useDispatch 时,我的组件继续渲染

谁能根据经验提供有关 useEffect 挂钩的更多信息

如何通过 Material ui select 使下拉菜单下拉

使用 React 中的功能组件更改另一个组件的状态

在 React 中使用使用状态挂钩合并两个数组

为什么这两个 div 的渲染方式不同?

错误未捕获的错误:[App] 不是 组件. 的所有子组件必须是