javascript - 重新绘制旧 donut 并通过单击每种颜色 Chart.js 创建一个新 donut

Question

我是编程新手，如果问题很愚蠢，我很抱歉。我正在用 chart.js 做一些图形.

我已经成功地通过 onclick 事件在另一个内部创建了一个 donut ，我遇到的问题是它为每次点击生成一个 donut ，而我只需要它执行一次。每次点击图形的不同区域， donut 都会生成一个 donut 。

例如:

如果单击红色，则会生成一个红色和灰色的 donut 。

如果点击绿色部分会生成一个绿色和灰色等等。

非常感谢您的帮助。

var ctx = document.getElementById('canvasDoughnut').getContext('2d');
var backgroundColors = [
  '#fd3f4a',
  '#484848',
  '#705bc9',
  '#008ee5',
  '#00c9d8',
  '#5cc600',
  '#ffd939',
  '#ff8f00'

];

var newColors = ['#5cc600', '#ebe9e1'];

var newData = [48, 52];

var varData = [25, 18, 18, 18, 8, 48, 18, 12];

var chart = new Chart(ctx, {
  type: 'doughnut',

  data: {
    datasets: [{

      backgroundColor: backgroundColors,
      data: varData
    }]
  },

  options: {
    cutoutPercentage: 70,
    rotation: Math.PI * -0.7,

    onClick: function(evt, elements) {

      var datasetIndex;
      var dataset;

      if (elements.length) {
        var index = elements[0]._index;
        datasetIndex = elements[0]._datasetIndex;

        // Reset old state
        dataset = chart.data.datasets[datasetIndex];
        dataset.backgroundColor = ['#5cc600', '#ebe9e1'];
        dataset.value = [58, 42],
          dataset.data = [58, 42]

      }
      // config. new data doughnut

      chart.config.data.datasets.push({
          backgroundColor: [
            '#5cc600',
            '#ebe9e1'
          ],
          dataPoints: [48, 52],
          data: [48, 52],
        }),
        chart.update();
    }

  },

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="canvasDoughnut" class="size-doughnut"></canvas>

Answer 1

您只需在推送新数据集之前进行检查，以确保您还没有 2 个数据集。

var ctx = document.getElementById('canvasDoughnut').getContext('2d');
var backgroundColors = [
  '#fd3f4a',
  '#484848',
  '#705bc9',
  '#008ee5',
  '#00c9d8',
  '#5cc600',
  '#ffd939',
  '#ff8f00'

];

var newColors = ['#5cc600', '#ebe9e1'];

var newData = [48, 52];

var varData = [25, 18, 18, 18, 8, 48, 18, 12];

var chart = new Chart(ctx, {
  type: 'doughnut',

  data: {
    datasets: [{

      backgroundColor: backgroundColors,
      data: varData
    }]
  },

  options: {
    cutoutPercentage: 70,
    rotation: Math.PI * -0.7,

    onClick: function(evt, elements) {

      var datasetIndex;
      var dataset;

      if (elements.length) {
        var index = elements[0]._index;
        datasetIndex = elements[0]._datasetIndex;

        // Reset old state
        dataset = chart.data.datasets[datasetIndex];
        dataset.backgroundColor = ['#5cc600', '#ebe9e1'];
        dataset.value = [58, 42],
          dataset.data = [58, 42]

      }
      // config. new data doughnut

      // check to make sure we haven't already pushed a dataset
      if (chart.config.data.datasets.length < 2) {
        chart.config.data.datasets.push({
          backgroundColor: [
            '#5cc600',
            '#ebe9e1'
          ],
          dataPoints: [48, 52],
          data: [48, 52],
        }),
        chart.update();
      }
    } 
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="canvasDoughnut" class="size-doughnut"></canvas>