Question

我正在使用ChartJs进行一个daughnut形式的小项目。当然，当您取消选择标签时，图表会自行调整，但我希望我的数字也会自动更新。我将所有内容都放在％中，我希望如果标签被删除，它会自动更新。这是我目前的代码：

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>

我是这个api的初学者所以请解释我如何做到这一点。

特里斯坦

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>

自动标签更新

1 个答案: