ラベルの自動更新

Question

私はChartJsを小さなプロジェクトに使用しています。もちろん、ラベルを選択解除すると、グラフ自体が調整されますが、私の番号も自動的に更新されます。 ％をすべて入れました。ラベルが削除された場合は、自動的に更新されます。私はこれを行う方法を私に説明してください。このAPIを使用して、初心者だ

var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
    labels: [ 
 
     "Marche", 
 
     "Course", 
 
     "Natation", 
 
     "Vélo" 
 
    ], 
 
    datasets: [{ 
 
     data: [65.45, 10, 10, 14.55], 
 
     backgroundColor: [ 
 
     "#00ff00", 
 
     "#008fb3", 
 
     "#ff0000", 
 
     "#ffff00", 
 
     ], 
 
     borderWidth: 1 
 
    }] 
 
    }, 
 
    options: { 
 
    tooltips: { 
 
     callbacks: { 
 
     label: function(tooltipItem, data) { 
 
      var allData = data.datasets[tooltipItem.datasetIndex].data; 
 
      var tooltipLabel = data.labels[tooltipItem.index]; 
 
      var tooltipData = allData[tooltipItem.index]; 
 
      var total = 0; 
 
      for (var i in allData) { 
 
      total += allData[i]; 
 
      } 
 
      var tooltipPercentage = Math.round((tooltipData/total) * 100); 
 
      return tooltipLabel + ': ' + tooltipData + ' %'; 
 
     } 
 
     } 
 
    }, 
 
    title: { 
 
     display: true, 
 
     text: 'Récapitulatif des séances de sport', 
 
     fontColor: "#000" 
 
    }, 
 

 
    legend: { 
 
     display: true, 
 
     labels: { 
 
     fontColor: '#000', 
 
     } 
 

 
    } 
 
    } 
 
});

.graphsize { 
 
    width: 500px; 
 
    height: 500px; 
 
    border: solid black 5px; 
 
    border-radius: 15px; 
 
} 
 
body { 
 
    margin-left: 27%; 
 
    margin-right: 25%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script> 
 
<div class="graphsize"> 
 

 
    <canvas id="myChart"></canvas> 
 
</div>

： はここに私の現在のコードです。

トリスタン

Answer 1

折れ線グラフとは異なりますが、ヘルパーメソッドchart.isDatasetVisibleを使用することはできませんので、あなたは伝説をクリックするとドーナツグラフは、データセットを隠していませんが、あなたはメタデータchartjsは、データポイントについて、内部で使用していますアクセスすることができますそれはあなたが を隠されているすべてのデータ項目を除外することができ、合計を作成するループでこれを使用して

data.datasets[DATASET_INDEX]._meta[0].data[DATA_ITEM_INDEX].hidden

隠されているかどうかを確認します

var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
    labels: [ 
 
     "Marche", 
 
     "Course", 
 
     "Natation", 
 
     "Vélo" 
 
    ], 
 
    datasets: [{ 
 
     data: [65.45, 10, 10, 14.55], 
 
     backgroundColor: [ 
 
     "#00ff00", 
 
     "#008fb3", 
 
     "#ff0000", 
 
     "#ffff00", 
 
     ], 
 
     borderWidth: 1 
 
    }] 
 
    }, 
 
    options: { 
 
    tooltips: { 
 
     callbacks: { 
 
     label: function(tooltipItem, data) { 
 
      var allData = data.datasets[tooltipItem.datasetIndex].data; 
 
      var tooltipLabel = data.labels[tooltipItem.index]; 
 
      var tooltipData = allData[tooltipItem.index]; 
 
      var total = 0; 
 
      for (var i in allData) { 
 
      if (!data.datasets[tooltipItem.datasetIndex]._meta[0].data[i].hidden) { 
 
       total += allData[i]; 
 
      } 
 

 
      } 
 
      var tooltipPercentage = Math.round((tooltipData/total) * 100); 
 

 
      return tooltipLabel + ': ' + tooltipPercentage + ' %'; 
 
     } 
 
     } 
 
    }, 
 
    title: { 
 
     display: true, 
 
     text: 'Récapitulatif des séances de sport', 
 
     fontColor: "#000" 
 
    }, 
 

 
    legend: { 
 
     display: true, 
 
     labels: { 
 
     fontColor: '#000', 
 
     } 
 

 
    } 
 
    } 
 
});

.graphsize { 
 
    width: 500px; 
 
    height: 500px; 
 
    border: solid black 5px; 
 
    border-radius: 15px; 
 
} 
 
body { 
 
    margin-left: 27%; 
 
    margin-right: 25%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script> 
 
<div class="graphsize"> 
 

 
    <canvas id="myChart"></canvas> 
 
</div>