每当切换来自一个数据的标签时，防止切换另一个数据的标签

Question

我有一个包含两个数据的饼图，其中两个按钮用于在数据之间切换。一切正常，除了每当我单击一个数据中的标签（以隐藏或显示标签和数据）时，其他数据的标签也被切换。

例如，在下面提供的代码中，在Data 1下，如果我单击标签Red将其隐藏，然后单击按钮Data 2以显示其他数据{{ 1}}也被隐藏。每当我单击一个标签（Apple等）时如何防止切换其他数据的标签（Apple等）？

Red

var chartCanvas = document.getElementById("pie-chart");

var data1 = [12, 19, 3, 5, 2, 3];
var data2 = [45, 8, 3, 1, 13, 53];

var labels1 = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
var labels2 = ['Apple', 'Berry', 'Banana', 'Mango', 'Grapes', 'Orange'];

// chart.js initialize:
var ctx = chartCanvas.getContext("2d");

var myChart = new Chart(ctx, {
	type: "pie",
	data: {
		labels: labels1,
		datasets: [
		{
			label: "Data 1",
			data: data1,
			labels: labels1,
			backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
	                'rgba(54, 162, 235, 0.2)',
	                'rgba(255, 206, 86, 0.2)',
	                'rgba(75, 192, 192, 0.2)',
	                'rgba(153, 102, 255, 0.2)',
	                'rgba(255, 159, 64, 0.2)'
	        ],
	        borderColor: [
	                'rgba(255, 99, 132, 1)',
	                'rgba(54, 162, 235, 1)',
	                'rgba(255, 206, 86, 1)',
	                'rgba(75, 192, 192, 1)',
	                'rgba(153, 102, 255, 1)',
	                'rgba(255, 159, 64, 1)'
	        ],
        }
	    ],
	},
	options: {
		legend: {
			display: true,
			position: "bottom"
		},
		title: {
			display: true,
			text: "Data 1"
		}
	}
});

// pie chart buttons:

var btn1 = document.getElementById("button1");
var btn2 = document.getElementById("button2");

	btn1.addEventListener("click", function() {
		myChart.data.datasets[0].label = "Data 1";
		myChart.data.datasets[0].data = data1;
		myChart.data.labels = labels1;
		myChart.options.title.text = "Data 1";
		myChart.update();
	});

	btn2.addEventListener("click", function() {
		myChart.data.datasets[0].label = "Data 2";
		myChart.data.datasets[0].data = data2;
		myChart.data.labels = labels2;
		myChart.options.title.text = "Data 2";
		myChart.update();
	});

Answer 1

我找不到直接的API。但是您可以执行的一种方法是重置元数据上的hidden属性。

function resetLegends() {
  myChart.getDatasetMeta(0).data.forEach(item => item.hidden = false);
}

var chartCanvas = document.getElementById("pie-chart");

var data1 = [12, 19, 3, 5, 2, 3];
var data2 = [45, 8, 3, 1, 13, 53];

var labels1 = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
var labels2 = ['Apple', 'Berry', 'Banana', 'Mango', 'Grapes', 'Orange'];

// chart.js initialize:
var ctx = chartCanvas.getContext("2d");

var myChart = new Chart(ctx, {
  type: "pie",
  data: {
    labels: labels1,
    datasets: [{
      label: "Data 1",
      data: data1,
      labels: labels1,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
    }],
  },
  options: {
    legend: {
      display: true,
      position: "bottom"
    },
    title: {
      display: true,
      text: "Data 1"
    }
  }
});

// pie chart buttons:

var btn1 = document.getElementById("button1");
var btn2 = document.getElementById("button2");

btn1.addEventListener("click", function() {
  myChart.data.datasets[0].label = "Data 1";
  myChart.data.datasets[0].data = data1;
  myChart.data.labels = labels1;
  myChart.options.title.text = "Data 1";
  resetLegends();
  myChart.update();
});

btn2.addEventListener("click", function() {
  myChart.data.datasets[0].label = "Data 2";
  myChart.data.datasets[0].data = data2;
  myChart.data.labels = labels2;
  myChart.options.title.text = "Data 2";
  resetLegends();
  myChart.update();
});

function resetLegends() {
  myChart.getDatasetMeta(0).data.forEach(item => item.hidden = false);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<canvas id="pie-chart"></canvas>
<button id="button1">Data 1</button>
<button id="button2">Data 2</button>

从docs和默认的onClick图例选项的源代码中得到一些启发。