使用R的Highcharter切换图表报错：chart.hide is not a function

这不是语法错误，是对Highcharts API的使用错误导致的。

错误原因 #

Highcharts的Chart实例本身并没有hide()和show()方法——这两个方法是图表内系列（Series）对象的专属方法，你直接调用整个图表实例的hide()/show()，自然会触发“不是函数”的报错。

针对不同需求的解决方案 #

需求1：切换整个图表的显示/隐藏（控制DOM元素）

如果你想让整个图表DOM元素显示或隐藏，需要操作图表对应的容器DOM，修改其CSS的display属性：

test_code <- JS("
function toggleSeries_test() {
  var chart1 = Highcharts.charts[0]; 
  var chart2 = Highcharts.charts[1]; 
  // 检查chart1是否处于显示状态
  if (chart1.container.style.display !== 'none') {
    chart1.container.style.display = 'none';
    chart2.container.style.display = 'block';
  } else {
    chart2.container.style.display = 'none';
    chart1.container.style.display = 'block';
  }
}

document.getElementById('toggleButton_test').addEventListener('click', toggleSeries_test);
")

需求2：切换图表内的指定系列显示/隐藏

如果你实际是想切换两个图表里的某个数据系列，需要先获取对应图表的series对象，再调用hide()/show()：

test_code <- JS("
function toggleSeries_test() {
  // 获取第一个图表的第一个系列、第二个图表的第一个系列
  var series1 = Highcharts.charts[0].series[0]; 
  var series2 = Highcharts.charts[1].series[0]; 
  if (series1.visible) {
    series1.hide();
    series2.show();
  } else {
    series2.hide();
    series1.show();
  }
}

document.getElementById('toggleButton_test').addEventListener('click', toggleSeries_test);
")

额外注意事项 #

• 确保Highcharts.charts[0]和Highcharts.charts[1]确实指向已渲染完成的图表实例，避免出现undefined的情况（可以在调用前加判断，比如if (chart1 && chart2)）。
• 在Highcharter的Shiny场景中，建议使用hc_add_event绑定事件，或在session$onFlushed回调中执行代码，确保图表已完全渲染。

内容的提问来源于stack exchange，提问作者DiamondJoe12