刻度之间的中心点标签（极区图 JS）

Question

我正在使用 Chart JS，其中我有一个极地面积图（参见图片https://imgur.com/XedmesD）我希望点标签在刻度之间居中。我找到了似乎只适用于具有 X 轴和 Y 轴的条形图的解决方案。

xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        ]} 

但这在使用极地面积图时似乎不起作用。

我的代码是

import React, { Component } from "react";
import Chart from "chart.js";

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

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

    new Chart(OrdersFufilledChart, {
      type: "polarArea",
        data: {
            datasets: [
                {
                    data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
                    backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931","#57C5C8","#57C5C8","#57C5C8","#57C5C8","#57C5C8"],
                    borderWidth: 4,
                    hoverBorderColor: "white",
                }
            ],
        labels: [
          "JAN",
          "FEB",
          "MAR",
          "APR",
          "MAY",
          "JUN",
          "JUL",
          "AUG",
          "SEP",
          "OCT",
          "NOV",
          "DEC"
        ],

      },
        options: {

            responsive: true,
            plugins: {
                datalabels: {
                    display: false,
                },

            },
            cutoutPercentage: 20,
            legend: {
                display: false
            },
            layout: {
                padding: 0,

            },
            scale: {
                scaleLabel: {
                    display: true
                },

           ticks: {
            max: 450,
            maxTicksLimit: 1,
                    display: false,

          },
          angleLines: {
            display: true
          },
            pointLabels: {
                display: true
            }
          },

      }
    });
  }
  render() {
    return (
      <div>
        <canvas
          id="OrdersFufilledChart"
          ref={this.OrdersFufilledChart}
          width={360}
          height={360}
        />
      </div>
    );
  }
}

任何有关我如何做到这一点的见解或正确方向的指示都将不胜感激。

编辑

我正在寻找这样的东西，中间有标签。

Answer 1

使用 datalabels-plugin 怎么样？

我想您在我使用此插件的地方看到了我的其他答案，因为您的代码与我的有很多相似之处。

我改进了我的代码，现在它可以响应了。标签甚至是动画的。我不同意OP对另一个问题的担忧（题外话：有人可以在这里纠正这个属格吗？我知道这是错误的......），在这种情况下，由于3个字符的标签很小，标签混乱。

完整代码： https: //jsbin.com/hamekugoja/2/edit?js ,output

let myChart = new Chart(document.getElementById("pie-chart"), {
  type: "polarArea",
  data: {
    datasets: [{
      data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
      backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8"],
      borderWidth: 4,
      hoverBorderColor: "white",
    }],
    labels: [
      "JAN",
      "FEB",
      "MAR",
      "APR",
      "MAY",
      "JUN",
      "JUL",
      "AUG",
      "SEP",
      "OCT",
      "NOV",
      "DEC"
    ],
  },
  options: {
    responsive: true,
    plugins: {
      datalabels: {
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex];
        },
        anchor: 'start',
        align: 'end',
        offset: 0 // Gets updated
      },
    },
    cutoutPercentage: 20,
    legend: {
      display: false
    },
    layout: {
      padding: 30,
    },
    scale: {
      scaleLabel: {
        display: true
      },
      ticks: {
        max: 450,
        maxTicksLimit: 1,
        display: false,
      },
      angleLines: {
        display: true
      },
      pointLabels: {
        display: false
      }
    },
    onResize: function() {
      let width = document.getElementById("pie-chart").width
      let padding = myChart.options.layout.padding
      myChart.options.plugins.datalabels.offset = width/2-padding
    }
  }
});

function updateOffset() {
  let width = document.getElementById("pie-chart").width
  let padding = myChart.options.layout.padding
  myChart.options.plugins.datalabels.offset = width/2-padding
  myChart.update()
}
updateOffset() //init call after we know the dimensions of the chart