单击chartjs饼图切片以隐藏切片

Question

我正试图让chartjs在点击时隐藏馅饼切片;单击图例时看到的行为相同。

这是我正在使用的代码 - 我注释掉了实际从图表中删除数据的代码，因为它没有正确地重新呈现饼图。

const values = [50, 55, 60, 33];
const data = {
  labels: ["India", "China", "US", "Canada"],
  datasets: [{
    data: values,
    backgroundColor: [
      "#4b77a9",
      "#5f255f",
      "#d21243",
      "#B27200"
    ],
    borderColor: "#fff"
  }]
};

const options = {
  tooltips: {
    enabled: false
  },
  legend: {
    enabled: true,
    position: 'bottom'
  },
  animation: false,
  onClick: handleClick,
  plugins: {
    datalabels: {
      formatter: (value = 0, ctxx) => {
        const sum = values.reduce((acc, val = 0) => (acc + val), 0);
        return `${(value * 100 / sum).toFixed(2)}%`;
      },
      color: '#fff',
    }
  }
};

const ctx = document.getElementById("pie-chart").getContext('2d');
const myChart = new Chart(ctx, {
  type: 'pie',
  data,
  options: options
});

function handleClick(e, slice) {
  setTimeout(() => {
    const legend = myChart.legend.legendItems;
    if (slice && slice[0]) {
      // get clicked on slice index
      const sliceIndex = slice[0]._index;
      // Removing the data "really" messes up the chart
      // myChart.data.labels.splice(sliceIndex, 1);
      // myChart.data.datasets[0].data.splice(sliceIndex, 1);
      legend[sliceIndex].hidden = true;
      chart.update();
    }
    const visibleSlices = legend.filter(l => !l.hidden);
    console.log('visible slices', visibleSlices);
  });
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="pie-chart"></canvas>

似乎设置隐藏标志然后更新图表应该工作，因为这是插件正在做的：https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.legend.js#L20-L30。

Answer 1

下面的代码是通过索引隐藏切片

myChart.getDatasetMeta(0).data[sliceIndex].hidden = true

const values = [50, 55, 60, 33];
const data = {
  labels: ["India", "China", "US", "Canada"],
  datasets: [{
    data: values,
    backgroundColor: [
      "#4b77a9",
      "#5f255f",
      "#d21243",
      "#B27200"
    ],
    borderColor: "#fff"
  }]
};

const options = {
  tooltips: {
    enabled: false
  },
  legend: {
    enabled: true,
    position: 'bottom'
  },
  animation: false,
  onClick: handleClick,
  plugins: {
    datalabels: {
      formatter: (value = 0, ctxx) => {
        const sum = values.reduce((acc, val = 0) => (acc + val), 0);
        return `${(value * 100 / sum).toFixed(2)}%`;
      },
      color: '#fff',
    }
  }
};

const ctx = document.getElementById("pie-chart").getContext('2d');
const myChart = new Chart(ctx, {
  type: 'pie',
  data,
  options: options
});

function handleClick(e, slice) {
  setTimeout(() => {
    const legend = myChart.legend.legendItems;
    if (slice && slice[0]) {
      const sliceIndex = slice[0]._index;

      myChart.getDatasetMeta(0).data[sliceIndex].hidden = true

      myChart.update();
    }
  });
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="pie-chart"></canvas>