React-ChartJS-2 使用标签时图表消失

Question

我目前正在学习 React 并尝试实现极地面积图。当我添加图表中的所有标签时，它们都会消失。我已经扩展了高度和宽度，看看是否能解决问题。我意识到代码可能不是我正在学习的最好的代码，因此欢迎任何建议。此外，如果有人对样式有任何提示，因为我希望标签围绕图表，因此一月将在一月的数据旁边等等。

datasets: [
    {
      data: [11, 16, 7, 3, 14, 11, 16, 7, 3, 14, 55, 87],
      backgroundColor: [
        "#FF6384",
        "#4BC0C0",
        "#FFCE56",
        "#E7E9ED",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB"
      ]
    }
  ],
  labels: [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ]
};

 <div id="chartjs">
     <Polar id="chart" data={data} />
 </div>

Answer 1

您可以使用标签插件 (chartjs-plugin-labels) 在每个区域的外侧添加标签。

请参阅以下工作片段...

$(document).ready(function() {
  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'polarArea',
    data: {
      datasets: [
        {
          data: [11, 16, 7, 3, 14, 11, 16, 7, 3, 14, 55, 87],
          backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB",
            "#36A2EB",
            "#36A2EB",
            "#36A2EB",
            "#36A2EB",
            "#36A2EB",
            "#36A2EB",
            "#36A2EB"
          ]
        }
      ],
      labels: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ]
    },
    options: {
      responsive: true,
      plugins: {
        labels: {
          render: 'label',
          arc: true,
          position: 'outside'
        }
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

Answer 2

我会在实例中执行此操作。我这样做的方式是这样的 -

export default class ChangeHere extends Component {
  ChangeHere = React.createRef();

  componentDidMount() {
    const ChangeHere = this.ChangeHere .current.getContext("2d");

    new Chart(PendingOrdersChart, {
      type: "polarArea",
      data: {
        labels: ["1", "2", "3", "4"],
        datasets: [
          {
            data: [125, 375, 300, 240],
            backgroundColor: "#57C5C8",
            borderWidth: 4,
            hoverBorderColor: "white",
            label: "Pending Orders"
          }
        ]
      },

React-ChartJS-2 使用标签时图表消失

React-ChartJS-2 Disappearing Chart when using Labels

charts

reactjs

react-chartjs