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

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

1 голос
/ 16 октября 2019

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

1 Ответ

0 голосов
/ 17 октября 2019

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