使用标签时的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

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

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"
          }
        ]
      },

Answer 2

您可以使用标签插件(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>

​