时间戳

首页 > 解决方案 > HighCharts Cloud 切换数据表

button - HighCharts Cloud 切换数据表

问题描述

我通过 HighCharts 云注入代码在单个页面上显示了一堆图表。因为每个图表的数据都很大，如果用户从菜单中选择查看数据表，页面会变得很大——我很好，但我希望用户能够切换由同一个菜单按钮触发的表. 有什么办法可以通过自定义代码做到这一点？

我已经弄清楚如何将菜单中的文本更改为Toggle data table，但无法弄清楚如何应用切换代码。

这是我到目前为止所拥有的：

exporting: {
  buttons: {
    contextButton: {
      enabled: true,
      text: 'Download',
      menuItems: ["printChart",
                "separator",
                "downloadPNG",
                "downloadJPEG",
                "downloadPDF",
                "downloadSVG",
                "separator",
                "downloadCSV",
                "downloadXLS",
                {
                    textKey: 'viewData',
                    text: 'Toggle data table',
                    onclick: function() {
                        this.viewData()
                        }
                }]
    }
  }

标签： buttonhighchartsexportcloudtoggle

解决方案

Highcharts 似乎没有提供任何隐藏数据表的方法。解决方法是将以下逻辑放入onclick事件中：

    onclick: function() {
      if (this.dataTableDiv && this.dataTableDiv.style.display !== 'none') {
        this.dataTableDiv.style.display = 'none';
      } else {
        this.viewData();
        this.dataTableDiv.style.display = '';
      }
    }

现场演示：http: //jsfiddle.net/BlackLabel/2t1w4pu9/

Cloud 在其编辑器中不包含 export-data 模块，但生成的注入脚本包含。所以该功能在云之外工作（例如在jsfiddle上）。

推荐阅读