javascript - Disable Print Chart option only from HighCharts - Stack Overflow

admin管理员组

文章数量:1395020

I have a DotNetHighchart with the usual options Print Chart, Download as PDF etc etc.

I only want to remove the print chart option, which seemed like a breeze in previous versions of highchart by using

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

But for reasons unbeknown to me the updated highcharts module only allows for one class within ExportingOptions...

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

                }
            }
        }

Which when set to Enabled=False disables ALL of the menu items which seems silly, meaning it's probably a gap in my own knowledge.

What am I missing here?

I have a DotNetHighchart with the usual options Print Chart, Download as PDF etc etc.

I only want to remove the print chart option, which seemed like a breeze in previous versions of highchart by using

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

But for reasons unbeknown to me the updated highcharts module only allows for one class within ExportingOptions...

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

                }
            }
        }

Which when set to Enabled=False disables ALL of the menu items which seems silly, meaning it's probably a gap in my own knowledge.

What am I missing here?

• javascript
• c#
• jquery
• highcharts
• dotnethighcharts

Share Improve this question Follow asked Aug 4, 2016 at 15:26 bjjrollsbjjrolls 64944 gold badges99 silver badges2121 bronze badges 11

• If you have the ability to set up global highcharts options (api.highcharts./highcharts#global) via javascript you could add that to the page with this setting applied. This would be used by all highcharts graphs on the page you load it on (load global options first, of course). The dotnethighcharts code has not been updated in about 2 years it looks like so it is missing all kinds of functionality that has been added to the main highcharts javascript library. – wergeld Commented Aug 4, 2016 at 16:54
• @wergeld ah I see. Do you have any more information on how to do this? Do I need to initialise my chart to a javascript variable? – bjjrolls Commented Aug 5, 2016 at 8:19
• That API link I placed in my ment should tell you what you need. You create a script tag on your HTML page. Contained within is the highcharts options you want all charts to have. Then, any chart created on this page will use those options unless specifically overridden in that chart's option. – wergeld Commented Aug 5, 2016 at 11:39
• I still haven't managed to get this working @wergeld. I have placed it within the doc.ready tags, and have not set the exporting options on the dotnet side of things yet the 'Print chart' option is still there. Any idea why this is? Thanks – bjjrolls Commented Aug 8, 2016 at 13:42
• I would need to see what code you are using. – wergeld Commented Aug 8, 2016 at 13:43

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 8 +50

I am not sure where you are getting printButton from but this is how you would do it. You create a Highcharts.setOptions javascript block and add in the exporting code:

 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
         }]
       }
     }
   }
 });

This creates only 2 export buttons. To change the type of the export please ready up further on exportChart() code. Then you have your chart code later down the page. I would not put the setOptions in the document ready section. I would put your actual chart in document ready. Working fiddle.

Option 2 Suppose you know that the default export menu items are always going to be in the order they are in right now. Then you can get the export menu items:

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

Now, remove the "print" section:

theExportOptions.splice(0, 1);

Close, but we still have a weird divider there. So, now remove it:

theExportOptions.splice(0, 2);

This seems OK. But, you have to put this bit of code in javascript before you load any chart. I don't like this option because you are dependent on HighCharts always having the same order/amount of export options.

It's very simple with the help of css

Now look at the above image. I want to hide 2nd(Print Chart) option. All options are displayed by html ul and li(unorder list). So i need to select 2nd child(as i want to hide print option) and make it display none.

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

After applying this css the "Print Chart" option will be hide like below image.

You can hide any option by changing child number. For example li:nth-child(3) or li:nth-child(4) etc. I did by this way and sure, this will help you.

本文标签： javascriptDisable Print Chart option only from HighChartsStack Overflow