仅从 HighCharts 禁用打印图表选项

Question

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

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

似乎很容易

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

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

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

                }
            }
        }

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

我在这里错过了什么？

Answer 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;

现在，删除 "print" 部分：

theExportOptions.splice(0, 1);

很接近，但我们那里仍然有一个奇怪的分隔线。所以，现在删除它：

theExportOptions.splice(0, 2);

这似乎还可以。但是，在加载任何图表之前，您必须将这段代码放在 javascript 中。我不喜欢这个选项，因为您依赖于 HighCharts 始终具有相同的 order/amount 导出选项。

Answer 2

借助css

就很简单了

现在看看上面的图片。我想隐藏第二个（打印图表）选项。所有选项均由 html ul 和 li（无序列表）显示。所以我需要 select 2nd child（因为我想隐藏打印选项）并使其显示 none.

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

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

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

仅从 HighCharts 禁用打印图表选项

Disable Print Chart option only from HighCharts

javascript

c#

jquery

highcharts

dotnethighcharts