Highcharts - 导出图表的当前状态

Question

Highcharts的导出方法根据用户的交互使用图表的初始状态而不是最新状态。如果您显示/隐藏某些系列，然后导出图表，您仍然会获得所有系列而不是图表实际显示的内容。

var chart;
$(document).ready(function() {

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'line',
        },

        title: {
            text: 'Expression Profile',
        },

        subtitle: {
            text: 'Reference: act'
        },

        xAxis: {
            categories: ['14das-seedling','25das-aerial','35das-aerial',
                         '42das-rosette','42das-stem','53das-stem',
                         '53das-inflores'],
            title: {
                text: 'Development stages',
                margin:20
            }

        },

        yAxis: {
            title: {                                            
                text: 'Log10 act'
            },

            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },

        legend: {
            margin:20
        },

        tooltip: {
            formatter: function() {
                return '<b>mir'+ this.series.name +'</b><br/>'+
                                this.x +' <br/>log10:'+ this.y ;
            }
        },

        series: [
            {
                name: '156a',
                data: [-2.75607, -3.41066, -4.10053, -4.63856, 
                       -4.73462,-4.6145,-3.90987]
            },
            {
                name: '156b',
                data: [-4.15935, -6.54969, -6.70229, -5.80646, 
                       -5.68092,-5.38481,-5.96406]
            },
            {
                name: '156c',
                data: [-4.83317, -5.52142, -4.94995, -5.47179, 
                       -4.97123,-4.86163,-5.12806]
            },
            {
                name: '156d',
                data: [0, -5.93499, -5.41856, -5.88918, 
                       -6.70304,-5.69335,-5.39792]
            },
            {
                name: '156e',
                data: [-4.0707, -6.1185, -6.58353, -6.17734, 
                       -6.84433,-5.4114,-5.37817]
            },
            {
                name: '156f',
                data: [-3.97561, -5.02619, -5.67834, -5.65722, 
                       -5.76238,-4.51125,-5.30344]
            },
            {
                name: '156g',
                data: [-3.81589, -2.50758, -2.41623, -3.63983, 
                       -3.73004,-2.90055,-3.61997]
            },
            {
                name: '156h',
                data: [-4.31169, -5.74017, -5.55419, -5.26679,
                       -5.01009,-4.99596,-5.68062]
            }
         ] 
    });
});

这是我的小提琴： http://jsfiddle.net/sherlock85/safKs/

是否可以导出图表的当前状态？

任何帮助将不胜感激。

Answer 1

对我来说，即使我修改图表，也会导出最新状态。我想如果您在修改后执行 Chart.redraw() ，它将导出最新状态。还可以尝试升级到最新版本的 highcharts。

Answer 2

此问题已在 Highcharts 2.1.5 版本中修复。我相信下面看到的 changelog 中的评论可以解决您的问题。

导出的图表现在在缩放和可见性选项后尊重用户设置的最小值和最大值。

Answer 3

如果您在图表中使用了以下代码，问题仍然存在：

chart = new Highcharts.Chart({
        chart: {
            ...,
            events: {
                load: function(event) {
                    this.series.forEach(function(d,i){if(d.options.id==1)d.hide()})
                }
            }    
        },...

这段代码负责最初隐藏图表中的系列（本例中 id==1）。它似乎具有无法导出图表当前状态的负面影响。

把它去掉，最初的问题就解决了。

如果您仍然想保留数据系列的“初始隐藏”，并且使用 AJAX（和 jQuery）来获取数据，请改用以下代码：

$.ajax({
    type: "GET",
    url: myURL,
    data: {data: myData},
    dataType: 'json',
    success: function(data) {
        chart.series[0].setData(data[0], true);
        chart.series[1].setData(data[1], true);
    },
    complete: function(jqXHR, textStatus) {
        chart.series[1].hide();
    }
});