Как отобразить значение среза внутри среза на графике p ie, используя график. js - PullRequest
Новая
       13

Как отобразить значение среза внутри среза на графике p ie, используя график. js

0 голосов
/ 15 января 2020

У меня есть сценарий, где мне нужно показать значение среза внутри среза на графике p ie. У меня более 1 p ie диаграмм на моей веб-странице. Приведенный ниже код прекрасно работает, но только для 1-й диаграммы P ie, а для других - ее ошибка выдачи, как показано ниже, не могли бы вы помочь мне разобраться в этом?

Error :: unCaught TypeError: не может прочитать свойство ' данные 'не определены. 

 Code:: 
 options:{
 animation:{
 onComplete:function(){
      var ctx = this.chart.ctx;
      var dataset_obj = this.data.datasets;
      for (var i=0;i<dataset_obj.length; i++){
          var meta_obj = dataset_obj[i]._meta[i].data;
          for (var j=0; j<meta_obj.length; j++){
               var model =meta_obj[j]._model;
               start_angle= model.startAngle;
               end_angle = model.endAngle;
               mid_angle =start_angle + ( end_angle -start_angle)/2;
               mid_radius = model.innerRadius + (model.outerRadius -model.innerRadius)/2;
               var x =mid_radius*math.cos(mid_angle);
               var  y = mid_radius*math.cos(mid_angle);

               ctx.fillstyle='#fff';
               if (dataset_obj[i].data[j] != 0 && meta_obj[j].hidden != true){
                    ctx.fillText(dataset_obj[i].data[j], model.x+x, model.y+y);
               }
         }
      }
 }
 }
 }

1 Ответ

0 голосов
/ 15 января 2020

Это отвечает на вопрос, содержащийся в заголовке вопроса:

Как отобразить значение среза внутри среза на графике p ie с помощью диаграммы. js

Приведенный ниже фрагмент кода показывает, как отображать значения внутри срезов с использованием chartjs-plugin-labels. Код образцов был извлечен из демонстрационной страницы chartjs-plugin-labels . 

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'pie',    
    data: {
      labels: ['January', 'February', 'March'],
      datasets: [{
        data: [50445, 33655, 15900],
        backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'value',
          fontColor: ['green', 'white', 'red']
        }
      }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

Если вы хотите отобразить процент каждого среза, вы можете сделать следующее: 

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'pie',    
    data: {
      labels: ['January', 'February', 'March'],
      datasets: [{
        data: [50445, 33655, 15900],
        backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'percentage',
          fontColor: ['green', 'white', 'red'],
          precision: 2
        }
      },
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>
...