ChartJS 甜甜圈数据在自定义按钮单击时切换

Question

有没有办法让甜甜圈 ChartJS 图表中的一些数据切换？我为图表创建了一些自定义 HTML/CSS 和随机数据，并且在过去的 6 个小时里我一直在努力寻找解决方案，但 youtube 上只有一些教程并没有太大帮助。

这是 HTML 部分：

<div class="mr-3 mt-4 d-flex flex-column align-items-center justify-content-center legendBoxActionsContent">
                    <button id="category1" onclick="toggleData(0)"></button>
                    <span class="mt-2" id="doughnut_label_0"></span>
                </div>

                <div class="mr-3 mt-4 d-flex flex-column align-items-center justify-content-center legendBoxActionsContent">
                    <button id="category1" onclick="toggleData(1)"></button>
                    <span class="mt-2" id="doughnut_label_1"></span>
                </div>

                <div class="mr-3 mt-4 d-flex flex-column align-items-center justify-content-center legendBoxActionsContent">
                    <button id="category2" onclick="toggleData(2)"></button>
                    <span class="mt-2" id="doughnut_label_2"></span>
                </div>

                <div class="mr-3 mt-4 d-flex flex-column align-items-center justify-content-center legendBoxActionsContent">
                    <button id="category3" onclick="toggleData(3)"></button>
                    <span class="mt-2" id="doughnut_label_3"></span>
                </div>

这里只是图表脚本的相关部分：

const myDashDoughnutChart = new Chart(dashDoughnutChart, {
        type: 'doughnut',
        data: {
            labels: ['Cat1', 'Cat2', 'Cat3', 'Cat4'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5],
                backgroundColor: [
                    'rgb(143,219,226)',
                    'rgb(255,206,148)',
                    'rgb(158,239,181)',
                    'rgb(251,172,172)'
                ],
                borderColor: [
                    'rgb(143,219,226)',
                    'rgb(255,206,148)',
                    'rgb(158,239,181)',
                    'rgb(251,172,172)'
                ],
                borderWidth: 1,
            }]
        },

这是我在 youtube 上找到的脚本，但它对我不起作用：

        function toggleData(value) {
        let showValue = myDashDoughnutChart.isDatasetVisible(value);
        
        if(showValue === true) {
            myDashDoughnutChart.hide(value)
        }

        if(showValue === false) {
            myDashDoughnutChart.show(value)
        }

每个按钮应该从 myDashDoughnutChart.data.datasets[0].data[] ...

中隐藏一个数据

Answer 1

切换函数可以这样写：

function toggleData(button, category) {
  chart.toggleDataVisibility(category);
  chart.update();
  if (chart.getDataVisibility(category)) {
    button.classList.remove('hidden');
  } else {
    button.classList.add('hidden');
  }
}

Further information about the Chart.js API can be found here.

请查看您修改后的代码，看看它是如何工作的：

const chart = new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['Cat1', 'Cat2', 'Cat3', 'Cat4'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5],
      backgroundColor: [
        'rgb(143,219,226)',
        'rgb(255,206,148)',
        'rgb(158,239,181)',
        'rgb(251,172,172)'
      ],
      borderColor: [
        'rgb(143,219,226)',
        'rgb(255,206,148)',
        'rgb(158,239,181)',
        'rgb(251,172,172)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        display: false
      }
    }
  }
});

function toggleData(button, category) {
  chart.toggleDataVisibility(category);
  chart.update();
  if (chart.getDataVisibility(category)) {
    button.classList.remove('hidden');
  } else {
    button.classList.add('hidden');
  }
}

.hidden {
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<div style="display: flex; flex-direction: column; align-items: center;">
  <div style="display: flex; gap: 10px; margin-bottom: 10px">
    <button id="category0" onclick="toggleData(this, 0)">category0</button>
    <button id="category1" onclick="toggleData(this, 1)">category1</button>
    <button id="category2" onclick="toggleData(this, 2)">category2</button>
    <button id="category3" onclick="toggleData(this, 3)">category3</button>
  </div>
  <canvas id="chart" width="200"></canvas>
</div>

ChartJS 甜甜圈数据在自定义按钮单击时切换

ChartJS doughnut data toggle on custom button click

javascript

charts

chart.js