chart.js切换数据集可见性和getDatasetVisibility不工作

aiazj4mn 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(188)

我试图从图表外部切换数据集的可见性。使用setDatasetVisibility显式设置生存能力可以很好地使用两个按钮，一个将其设置为true，另一个设置为false。
虽然setDatasetVisibility确实会隐藏和显示数据集，但getDatasetVisibility会继续返回true，而不管当前的可见性如何。
toggleDatasetVisibility方法不隐藏任何内容，但它确实更改了getDatasetVisibility的状态，现在getDatasetVisibility返回正确的值。
为什么为了使这个工作，我需要做这样的事情？我希望toggleDataVisibility就足够了。

lineChart.toggleDataVisibility(1);
lineChart.setDatasetVisibility(1, lineChart.getDataVisibility(1));
lineChart.update();

https://jsfiddle.net/oxywhtdv/

chart.js

来源：https://stackoverflow.com/questions/73810281/chart-js-toggledatasetvisibility-and-getdatasetvisibility-doesnt-work

1条答案

按热度按时间

nfzehxib1#

这是因为toggleDatasetVisibility不是一个函数，正如您在代码中显示的那样，您使用的是toggleDataVisibility，根据文档，这仅对支持隐藏单个元素的图表类型有效。
折线图不支持从线条中隐藏单个点，因此您不能将toggleDataVisibility用于您的用例。
您可以使用getDatasetMeta(datasetIndex).hidden来检查数据集是否隐藏（请注意，此属性仅在更新一次后设置）

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

<canvas id="line-chart"></canvas>
<div>
  <input type="button" value="Show Set 2" onclick="restoreLayer2()">
  <input type="button" value="Hide Set 2" onclick="removeLayer2()">
</div>
<script>
  lineChart = new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
      labels: [
        '10:00 AM',
        '11:00 AM',
        '12:00 PM',
        '1:00 PM',
        '2:00 PM',
        '3:00 PM',

        '4:00 PM',
        '5:00 PM',
        '6:00 PM',
        '7:00 PM',
        '8:00 PM',
        '9:00 PM'
      ],
      datasets: [{
        label: 'Temperature',
        data: [
          74,
          77,
          80,
          82,
          86,
          85,

          83,
          79,
          72,
          68,
          66,
          66
        ],
      }, {
        label: 'Humidity',
        data: [
          44,
          44,
          45,
          45,
          45,
          46,

          46,
          46,
          45,
          44,
          44,
          44
        ],
      }],
    },
    options: {
      plugins: {
        legend: {
          display: false
        }
      }
    }
  });

  function restoreLayer2() {
    console.log(lineChart.getDatasetMeta(1).hidden);

    lineChart.setDatasetVisibility(1, true);
    lineChart.update();
  }

  function removeLayer2() {
    console.log(lineChart.getDatasetMeta(1).hidden);

    lineChart.setDatasetVisibility(1, lineChart.getDatasetMeta(1).hidden);

    lineChart.update();
  }
</script>

赞(0）回复(0）举报 2022-11-06

我来回答

chart.js切换数据集可见性和getDatasetVisibility不工作

1条答案

相关问题

热门标签

最新问答