在 CanvasJS 图表中隐藏所有系列按钮（javascript foreach usage）

Question

问题与 CanvasJS 相关，但可能任何纯 javascript 方面的专家都可以提供帮助。

我需要一个按钮来 hide/unhide canvasjs 图表中的所有元素。有一个可以使用数组索引隐藏元素的工作代码：

chart.options.data[0].visible = !chart.options.data[0].visible;

我正在尝试遍历数组，但它不起作用，显然我的代码是错误的：

chart.options.data.forEach(visible = !visible);

我该如何解决？

完整的代码片段是：

 var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Test Button to Hide All Series"  
      },
      
      legend: {
            cursor: "pointer",
            itemclick: function (e) {
                //console.log("legend click: " + e.dataPointIndex);
                //console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
 
                e.chart.render();
            }
        },
      
      data: [
      { 
        showInLegend: true,
        type: "line",
        dataPoints: [
        { x: 10, y: 5 },
        { x: 20, y: 9},
        { x: 30, y: 17 },
        { x: 40, y: 32 },
        { x: 50, y: 22 },
        { x: 60, y: 14 },
        { x: 70, y: 25 },
        { x: 80, y: 18 },
        { x: 90, y: 20}
      
        ]
      },
        {
        showInLegend: true,
        type: "line",
        dataPoints: [
        { x: 10, y: 31 },
        { x: 20, y: 35},
        { x: 30, y: 30 },
        { x: 40, y: 35 },
        { x: 50, y: 35 },
        { x: 60, y: 38 },
        { x: 70, y: 38 },
        { x: 80, y: 34 },
        { x: 90, y: 44}
      
        ]
      },
        {
        showInLegend: true,
        type: "line",
        dataPoints: [
        { x: 10, y: 25 },
        { x: 20, y: 30},
        { x: 30, y: 20 },
        { x: 40, y: 45 },
        { x: 50, y: 30 },
        { x: 60, y: 10 },
        { x: 70, y: 15 },
        { x: 80, y: 18 },
        { x: 90, y: 20}
      
        ]
      }
      ]
    });
 
    chart.render();
    
 document.getElementById("showAllSeries").onclick =  function(){
   //Works for a single element using index:
   chart.options.data[0].visible = !chart.options.data[0].visible;
   //Doesn't work, need to modify
   //chart.options.data.forEach(visible = !visible);
   chart.render();
 };

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>

UP: 找到 for 循环的解决方案：

   for (var i = 0; i < chart.options.data.length; i++) {
   chart.options.data[i].visible = !chart.options.data[i].visible;
   }

但仍然很有趣它应该如何与 foreach

一起工作

Answer 1

forEach 是一种数组方法，可用于对数组中的每个元素执行函数。另一方面，for是一个更灵活的循环。

在您的情况下，您可以使用 for 或 forEach 隐藏按钮单击时的所有数据系列。检查下面的代码：

var chart = new CanvasJS.Chart("chartContainer", {
 title:{
  text: "Test Button to Hide All Series"  
 },

 legend: {
  cursor: "pointer",
  itemclick: function (e) {
   if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
   } else {
    e.dataSeries.visible = true;
   }
   e.chart.render();
  }
 },

 data: [
  { 
  showInLegend: true,
  type: "line",
  dataPoints: [
   { x: 10, y: 5 },
   { x: 20, y: 9 },
   { x: 30, y: 17 },
   { x: 40, y: 32 },
   { x: 50, y: 22 },
   { x: 60, y: 14 },
   { x: 70, y: 25 },
   { x: 80, y: 18 },
   { x: 90, y: 20 }
  ]
  },
  {
  showInLegend: true,
  type: "line",
  dataPoints: [
   { x: 10, y: 31 },
   { x: 20, y: 35 },
   { x: 30, y: 30 },
   { x: 40, y: 35 },
   { x: 50, y: 35 },
   { x: 60, y: 38 },
   { x: 70, y: 38 },
   { x: 80, y: 34 },
   { x: 90, y: 44 }
  ]
  },
  {
  showInLegend: true,
  type: "line",
  dataPoints: [
   { x: 10, y: 25 },
   { x: 20, y: 30 },
   { x: 30, y: 20 },
   { x: 40, y: 45 },
   { x: 50, y: 30 },
   { x: 60, y: 10 },
   { x: 70, y: 15 },
   { x: 80, y: 18 },
   { x: 90, y: 20 }
  ]
  }
 ]
});

chart.render();

document.getElementById("showAllSeries").onclick =  function(){
 chart.options.data.forEach(function(dataSeries) {
   if (typeof (dataSeries.visible) === "undefined" || dataSeries.visible) {
   dataSeries.visible = false;
  } else {
   dataSeries.visible = true;
  }
 });
 /*var dataSeries;
   for(var i = 0; i < chart.data.length; i++){
   dataSeries = chart.options.data[i];
  if (typeof (dataSeries.visible) === "undefined" || dataSeries.visible) {
   dataSeries.visible = false;
  } else {
   dataSeries.visible = true;
  }
 }*/  
 chart.render();
};

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>

Answer 2

感谢 Vishwas 的详细解答。一般来说 - 是的，for 和 forEach 都可以在这里使用。我会将其标记为正确的，但它帮助我使用 forEach 获得了我预期的更简洁的解决方案：

document.getElementById(""showAllSeries"").onclick =  function(){
 chart.options.data.forEach(function(dataSeries) {
    dataSeries.visible = !dataSeries.visible })
    chart.render();
    };

也会把它留在这里作为历史：

 var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Test Button to Hide All Series"  
      },
      
      legend: {
            cursor: "pointer",
            itemclick: function (e) {
                //console.log("legend click: " + e.dataPointIndex);
                //console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
 
                e.chart.render();
            }
        },
      
      data: [
      { 
        showInLegend: true,
        type: "line",
        dataPoints: [
        { x: 10, y: 5 },
        { x: 20, y: 9},
        { x: 30, y: 17 },
        { x: 40, y: 32 },
        { x: 50, y: 22 },
        { x: 60, y: 14 },
        { x: 70, y: 25 },
        { x: 80, y: 18 },
        { x: 90, y: 20}
      
        ]
      },
        {
        showInLegend: true,
        type: "line",
        dataPoints: [
        { x: 10, y: 31 },
        { x: 20, y: 35},
        { x: 30, y: 30 },
        { x: 40, y: 35 },
        { x: 50, y: 35 },
        { x: 60, y: 38 },
        { x: 70, y: 38 },
        { x: 80, y: 34 },
        { x: 90, y: 44}
      
        ]
      },
        {
        showInLegend: true,
        type: "line",
        dataPoints: [
        { x: 10, y: 25 },
        { x: 20, y: 30},
        { x: 30, y: 20 },
        { x: 40, y: 45 },
        { x: 50, y: 30 },
        { x: 60, y: 10 },
        { x: 70, y: 15 },
        { x: 80, y: 18 },
        { x: 90, y: 20}
      
        ]
      }
      ]
    });
 
    chart.render();
    
    document.getElementById("showAllSeries").onclick=function(){
      chart.options.data.forEach(function(dataSeries){
  dataSeries.visible = !dataSeries.visible
            })
     chart.render();
     };

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>

在 CanvasJS 图表中隐藏所有系列按钮（javascript foreach usage）

Hide all series button in CanvasJS graph (javascript foreach usage)

javascript

arrays

canvasjs