Question

当我使用通过导出库导出图表时，如何在HighChart上隐藏已启用的滚动条？我试图切换滚动条的显示，但似乎当内部代码调用chart.getSVG（）时，忽略对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();
  });
});

如您所见，当您以任何格式导出图表时，将显示图表的滚动条。但是，当您使用图表下方的按钮切换滚动条然后将其导出时，滚动条仍会在导出中呈现。

我无法找到有关动态禁用滚动条的任何信息：（

注意：需要启用滚动条以在我的客户端环境中使用。这只是一个快速示例，启用滚动条来演示此问题。

Answer 1

您可以在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/

HighCharts导出隐藏滚动条

1 个答案: