仅从 HighCharts 禁用打印图表选项答案

【问题标题】：Disable Print Chart option only from HighCharts仅从 HighCharts 禁用打印图表选项
【发布时间】：2016-12-10 19:43:47
【问题描述】：

我有一个 DotNetHighchart 带有常用选项打印图表、下载为 PDF 等。

我只想删除打印图表选项，这在以前版本的 highchart 中似乎很容易使用

.SetExporting(new Exporting
{
    Buttons = new ExportingButtons
    {
       PrintButton = new ExportingButtonsPrintButton 
       {
          Enabled = false
       }
    }
}

但由于我不知道的原因，更新后的 highcharts 模块只允许 ExportingOptions 中的一个类...

        .SetExporting(new DotNet.Highcharts.Options.Exporting
        {
            Buttons = new DotNet.Highcharts.Options.ExportingButtons
            {
                ContextButton = new DotNet.Highcharts.Options.ExportingButtonsContextButton
                {

                }
            }
        }

当设置为 Enabled=False 时，会禁用所有看起来很愚蠢的菜单项，这意味着这可能是我自己的知识空白。

我在这里错过了什么？

【问题讨论】：

如果您能够通过 javascript 设置全局 highcharts 选项 (api.highcharts.com/highcharts#global)，您可以将其添加到应用此设置的页面中。这将被您加载它的页面上的所有 highcharts 图表使用（当然，首先加载全局选项）。 dotnethighcharts 代码看起来已经有大约 2 年没有更新了，因此它缺少已添加到主要 highcharts javascript 库中的各种功能。
@wergeld 啊，我明白了。你有更多关于如何做到这一点的信息吗？我需要将图表初始化为 javascript 变量吗？
我在评论中放置的那个 API 链接应该会告诉你你需要什么。您在 HTML 页面上创建一个脚本标记。其中包含您希望所有图表都具有的 highcharts 选项。然后，在此页面上创建的任何图表都将使用这些选项，除非在该图表的选项中特别覆盖。
我还没有设法让这个工作@wergeld。我已将其放置在 doc.ready 标记中，并且尚未在 dotnet 方面设置导出选项，但“打印图表”选项仍然存在。知道这是为什么吗？谢谢
我需要看看你使用的是什么代码。

标签： javascript c# jquery highcharts dotnethighcharts

【解决方案1】：

我不确定您从哪里获得printButton，但这就是您的做法。您创建一个Highcharts.setOptions javascript 块并添加exporting 代码：

 Highcharts.setOptions({
   global: {
     useUTC: false
   },
   exporting: {
     buttons: {
       contextButton: {
         menuItems: [{
           text: 'Export to PNG (small)',
           onclick: function() {
             this.exportChart({
               width: 250
             });
           }
         }, {
           text: 'Export to PNG (large)',
           onclick: function() {
             this.exportChart();
           },
           separator: false
         }]
       }
     }
   }
 });

这只会创建 2 个导出按钮。要更改导出类型，请在exportChart() 代码上进一步准备。然后你在页面后面有你的图表代码。我不会将setOptions 放在文档就绪部分。我会将您的实际图表放入准备好的文件中。工作fiddle。

选项 2 假设您知道默认导出菜单项始终按照它们现在的顺序排列。然后就可以得到导出菜单项了：

var theExportOptions = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;

现在，删除“打印”部分：

theExportOptions.splice(0, 1);

关闭，但我们仍然有一个奇怪的分隔线。所以，现在删除它：

theExportOptions.splice(0, 2);

这似乎没问题。但是，在加载任何图表之前，您必须将这段代码放入 javascript 中。我不喜欢这个选项，因为您依赖于 HighCharts 总是具有相同的顺序/数量的导出选项。

【讨论】：

太棒了，非常感谢。我根据您的建议选择了第一个选项，现在已解决。

【解决方案2】：

借助css非常简单

现在看上面的图片。我想隐藏第二个（打印图表）选项。所有选项均由 html ul 和 li（无序列表）显示。所以我需要选择第二个孩子（因为我想隐藏打印选项）并让它不显示。

<style>
        ul.highcharts-menu li:nth-child(2){
            display: none !important;
        }
</style>

应用此 css 后，“打印图表”选项将如下图所示隐藏。

您可以通过更改子编号来隐藏任何选项。例如 li:nth-child(3) 或 li:nth-child(4) 等。我就是这样做的，当然，这会对你有所帮助。

【讨论】：