Highcharts - 导出图表的当前状态

时间:2011-05-25 13:05:02

标签: highcharts export

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/

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

任何帮助都将不胜感激。

3 个答案:

答案 0 :(得分:1)

即使我修改图表,对我来说也是导出最新状态。我想如果你在修改后做了chart.redraw(),它将导出最新的状态。还尝试升级到最新版本的highcharts。

答案 1 :(得分:1)

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

  

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

答案 2 :(得分:0)

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

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