React-ChartJS-2 Исчезающая диаграмма при использовании меток

В настоящее время я изучаю 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>

reactjs charts react-chartjs
person Deeroy    schedule 16.10.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вместо этого я бы сделал это в экземпляре. Я сделал это так:

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"
          }
        ]
      },
person Hughesey    schedule 28.11.2019
comment
Я преобразовал свою диаграмму в экземпляр, но, к сожалению, горизонтальная гистограмма все еще не отображается. Я думаю, что это должна быть ошибка с диаграммой js, и надеюсь, что следующее обновление исправит проблему. - person Deeroy; 28.11.2019

arrow_upward
0
arrow_downward

вы можете использовать плагин меток (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>

person WhiteHat    schedule 17.10.2019