使用滚动条对HighChart进行多次导出时出现问题

Issue in multiple exporting for HighChart with scrollbar

本文关键字：问题 滚动条 HighChart      更新时间：2023-09-26

我在导出启用滚动条的柱形图时遇到问题，该问题不会在滚动后导出完整的图表。它是第一次工作，但当我向右或向左滚动，然后在导出时，导出并没有完全发生。这是样品。

var processedDataArray = [
{"Series_1_Value":1054237.31,"Series_2_Value":297367.88,"Series_3_Value":955472.31, "other":123450.45, "category":"CATEGORY-1"},
{"Series_1_Value":1914955.84,"Series_2_Value":472603.94,"Series_3_Value":1717425.84,"other":234560.45, "category":"CATEGORY-2"},
{"Series_1_Value":1172527.75,"Series_2_Value":368143.09,"Series_3_Value":1073762.75,"other":345670.45, "category":"CATEGORY-3"},
{"Series_1_Value":908568.43,"Series_2_Value":309490.05,"Series_3_Value":809803.43,"other":789010.45, "category":"CATEGORY-4"},
{"Series_1_Value":8001718.08,"Series_2_Value":5983055.85,"Series_3_Value":7112833.08,"other":890102.45, "category":"CATEGORY-5"},
{"Series_1_Value":1060572.17,"Series_2_Value":317503.11,"Series_3_Value":961807.17,"other":901230.45, "category":"CATEGORY-6"},
{"Series_1_Value":2484203.07,"Series_2_Value":1189924.57,"Series_3_Value":2187908.07,"other":435260.45, "category":"CATEGORY-7"},
{"Series_1_Value":6070895.44,"Series_2_Value":2722014.27,"Series_3_Value":5379540.44,"other":678900.45, "category":"CATEGORY-8"}
];
var series1DataArray = [];
var series2DataArray = [];
var series3DataArray = [];
var series4DataArray = [];
var categories = [];
var seriesNms = ['Series 1', 'Series 2', 'Series 3', 'Other'];
var _colors = ['#2F7ED8', '#915612', '#8BBC21', '#AA86F2', '#9054B6', '#76F0A3', '#A98835', '#09ACB6'];
for (i = 0; i < processedDataArray.length; i++) {
  var dataObject = processedDataArray[i];
  categories.push(dataObject['category']);
  series1DataArray.push({
    name: dataObject['category'],
    y: parseInt(dataObject['Series_1_Value'])
  });
  series2DataArray.push({
    name: dataObject['category'],
    y: parseInt(dataObject['Series_2_Value'])
  });
  series3DataArray.push({
    name: dataObject['category'],
    y: parseInt(dataObject['Series_3_Value'])
  });
  series4DataArray.push({
    name: dataObject['category'],
    y: parseInt(dataObject['other'])
  });
}
$(function() {
  new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'colChart',
      borderColor: '#000000',
      borderWidth: 2,
      plotBackgroundColor: 'rgba(255, 255, 255, .1)',
      plotBorderColor: '#CCCCCC',
      plotBorderWidth: 1,
      zoomType: 'xy',
      width: 960,
      events: {
        load: function() {
          alert('Chart has loaded with exporting option ' + this.options.exporting.enabled + ", min:" + this.xAxis[0].min + ", max:" + this.xAxis[0].max + ", categories.length=" + categories.length);
        }
      }
    },
    scrollbar: {
      enabled: true
    },
    colors: _colors,
    exporting: {
      enabled: true,
      sourceWidth: 960,
      sourceHeight: 400,
      chartOptions: {
        xAxis: [{
          categories: categories,
          max: categories.length - 1
        }],
        scrollbar: {
          enabled: false
        }
      }
    },
    yAxis: {
      title: {
        text: 'Value($)'
      }
    },
    xAxis: {
      categories: categories,
      max: categories.length > 5 ? 5 : categories.length - 1
    },
    plotOptions: {
      series: {
        pointPadding: 0.05,
        groupPadding: 0.15
      }
    },
    title: {
      text: 'Column Chart',
      align: 'center'
    },
    series: [{
      name: seriesNms[0],
      data: series1DataArray
    }, {
      name: seriesNms[1],
      data: series2DataArray
    }, {
      name: seriesNms[2],
      data: series3DataArray
    }, {
      name: seriesNms[3],
      data: series4DataArray
    }],
    credits: {
      enabled: false
    }
  }); //end of Chart const
}); //end of function...
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <title>Highcharts</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
  <div id="colChart"></div>
</body>
</html>

如何解决问题？。如果您看到弹出对话框，它不会显示相同的"启用导出"布尔值。

将min和minRange添加到exporting.chartOptions.xAxis中似乎会产生积极的结果。这确实需要max仍然存在，并且如果这三者中的任何一个缺失，似乎会给出不同的结果。

例如（更新的JSFiddle）：

exporting:{
    enabled: true,
    sourceWidth: 960,
    sourceHeight: 400,
    chartOptions: {
        xAxis: [{
            categories: categories,
            min: 0,                           // Added for fix
            minRange: categories.length-1,    // Added for fix
            max: categories.length-1
        }],
        scrollbar:{
            enabled: false
        }
    }
}

希望这能解决你的问题。至于为什么，我不知道。

相关文章：