HighCharts導出隱藏滾動條

當我使用通過導出庫導出圖表時，我該如何隱藏HighChart上啓用的滾動條？我試圖切換滾動條的顯示，但似乎在內部代碼調用chart.getSVG（）時，對HighCharts庫之外的圖表所做的任何更改都被省略（例如，通過代碼修改圖表元素）。HighCharts導出隱藏滾動條

請看這裏工作的例子： jsfiddle

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script> 

<div id="container"></div> 

<button id="toggleScrollbar"> 
    Toggle Scrollbar 
</button>

的JavaScript

$(function() { 
    Highcharts.chart('container', { 
    exporting: { 
     chartOptions: { // specific options for the exported image 
     plotOptions: { 
      series: { 
      dataLabels: { 
       enabled: true 
      } 
      } 
     } 
     }, 
     scale: 3, 
     fallbackToExportServer: false 
    }, 

    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Historic World Population by Region' 
    }, 
    subtitle: { 
     text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>' 
    }, 
    xAxis: { 
     categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
     title: { 
     text: null 
     }, 
     scrollbar: { 
     enabled: true 
     } 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
     text: 'Population (millions)', 
     align: 'high' 
     }, 
     labels: { 
     overflow: 'justify' 
     } 
    }, 
    tooltip: { 
     valueSuffix: ' millions' 
    }, 
    plotOptions: { 
     bar: { 
     dataLabels: { 
      enabled: true 
     } 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'top', 
     x: -40, 
     y: 80, 
     floating: true, 
     borderWidth: 1, 
     backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
     shadow: true 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'Year 1800', 
     data: [107, 31, 635, 203, 2] 
    }, { 
     name: 'Year 1900', 
     data: [133, 156, 947, 408, 6] 
    }, { 
     name: 'Year 2012', 
     data: [1052, 954, 4250, 740, 38] 
    }] 

    }); 

    $('#toggleScrollbar').on('click', function() { 
    var $scrollbar = $('#container').find('.highcharts-scrollbar'); 
    $scrollbar.toggle(); 
    }); 
});

正如你可以看到，當您導出圖表中的任何格式，圖表的滾動條是dis播放。但是，如果使用圖表下方的按鈕切換滾動條，然後將其導出，則滾動條仍會呈現在導出中。

我找不到在動態禁用滾動條:(

注意的任何信息：滾動條需要在我的客戶的環境中使用啓用這

只是一個簡單的例子啓用滾動條來證明這個問題。

來源

2016-11-09 Dustin

您可以在exporting.chartOptions財產導出圖表設置附加選項 - 選項將被合併

exporting: { 
    chartOptions: { // specific options for the exported image 
    plotOptions: { 
     series: { 
     dataLabels: { 
      enabled: true 
     } 
     } 
    }, 
    xAxis: { 
     scrollbar: { 
     enabled: false 
     } 
    } 
    }, 
    scale: 3, 
    fallbackToExportServer: false 
},

例如：http://jsfiddle.net/gjrqyj2g/13/

來源

2016-11-09 20:49:50 morganfree

謝謝！我沒有考慮考慮出口選擇。非常感激：） – Dustin

HighCharts導出隱藏滾動條

回答

相關問題