更改 react-chartjs-3 中的标签位置

Question

我无法将标签的位置更改为 react-chart-js3 中的底部。它现在显示在图表的顶部。

import React, { useState, useEffect } from "react";
import { Doughnut, Line, Pie } from "react-chartjs-3";

export default function UserDashboard() {
  const DoughData = {
    labels: ["Red", "Green", "Yellow"],
    datasets: [
      {
        data: [300, 50, 100],
        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
      },
    ],
  };

  return (
    <div>
      <Doughnut data={DoughData} />
    </div>
  );
}

Answer 1

将 options 属性传递给 Doughnut 组件。

import React from "react";
import { Doughnut } from "react-chartjs-3";

export default function UserDashboard() {
  const DoughData = {
    labels: ["Red", "Green", "Yellow"],
    datasets: [
      {
        data: [300, 50, 100],
        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
      }
    ]
  };

  const options = {
    legend: {
      display: true,
      position: "bottom"
    }
  };

  return (
    <div>
      <Doughnut data={DoughData} options={options} />
    </div>
  );
}

工作代码 - https://codesandbox.io/s/wandering-snowflake-b7tgd?file=/src/tickets.js

Answer 2

那些为 react-chartjs-2 寻找解决方案的人试试这个：

const options = {
  responsive: true,
  plugins: {
    legend: {
      display: true,
      position: "bottom"
    },
  },
};

Answer 3

正在检查父级是否未设置高度属性：

如果父元素没有设置高度，则粘性元素在滚动时将没有任何可粘附的区域。发生这种情况是因为粘性元素意味着 stick/scroll 在 a 的高度内容器。检查父元素是否为 Flexbox

如果粘性元素的父元素是 flexbox，则有两种情况需要检查：

粘性元素有align-self：自动设置（默认设置）；粘性元素有 align-self: stretch 集。如果粘性元素具有 align-self：auto 设置：在这种情况下，align-self 的值将计算为父元素的 align-items 值。所以，

如果父元素设置了 align-items: normal（默认）或 align-items: stretch 集，那么这意味着粘性元素的高度将拉伸以填充整个可用 space。这将使粘性元素没有空间在父元素中滚动。

如果粘性元素有align-self: stretch Set:

在这种情况下，粘性元素会拉伸到父元素的高度，并且没有任何可滚动的区域。

如何使粘性元素在 Flexbox 中可滚动：您可以简单地将 align-self 属性的值设置为 align-self：flex-start。这会将粘性元素放在开头并且不会拉伸 it.enter link description here

更改 react-chartjs-3 中的标签位置

change label position in react-chartjs-3

reactjs

react-chartjs

react-chartjs-2