0

我有一个与图表导出有关的问题。

请在此处查看 Jsfiddle

我在 Yaxis 上添加了一个文本标签chart.renderer.text，用于获取系列的最新值。

如果我直接单击“导出图像”按钮。没有问题，标签可以显示。我正在使用以下方式导出图像。draw_labels() 是一个绘制 yaxis 标签的函数。

$("#b").click(function () {
      chart.exportChart(null, {
            chart: {
                       backgroundColor: '#FFFFFF',
                       width: 972,
                       height: 480,
                       events: {
                           load: function () {
                               draw_labels(this);
                            }
                           }
                        }
                  });
        });

问题是在我单击范围选择器或更改 Xaxis 范围之后。当我尝试将图表导出为图像时，没有绘制任何标签。以下是完整的代码。

以下是完整代码：

$(function () {
    var chart;
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                events: {
                    load: function () {
                        draw_labels(this);
                        $("#b").click(function () {
                            chart.exportChart(null, {
                                chart: {
                                    backgroundColor: '#FFFFFF',
                                    width: 972,
                                    height: 480,
                                    events: {
                                        load: function () {
                                            draw_labels(this);
                                        }
                                    }
                                }
                            });
                        });
                    }
                }
            },

            series: [{
                name: 'AAPL',
                id: 'test',
                data: data,
                tooltip: {
                    valueDecimals: 2
                }
            }],

            navigator: {
                enabled: false
            },

            yAxis: {
                tickWidth: 0,
                id: 'value_axis',
                type: 'linear',
                gridLineColor: '#EEE',

                lineColor: '#D0CDC9',
                lineWidth: 0,
                minorTickInterval: null,

                opposite: true,

                offset: 0

            },

            xAxis: {
                events: {
                    afterSetExtremes: function (e) {
                        console.log('test');
                        $('[id="test_text"]').remove();
                        draw_labels(chart);
                    }
                }
            }
        });
    });



    function draw_labels(chart) {
        $(chart.series).each(function (i, serie) {

            var s_id = serie.options.id;

            var temp_id = s_id;

            var point = serie.points[serie.points.length - 1];

            if (point) {

                var pre, post;

                if (point.y) {
                    var last_value_dis = (point.y).toFixed(1);


                    yaxis_name = 'value_axis';

                    //Get Yaxis position
                    var y_axis = chart.get(yaxis_name);
                    offsite_yaxis = 0;
                    element_text = chart.renderer.text(
                    //the text to render
                    '<span style="font-size:10px;font-weight:bold;color:' + serie.color + ';">' + last_value_dis + '</span>',
                    //the 'x' position
                    y_axis.width + y_axis.offset,
                    //the 'y' position
                    chart.plotTop + point.plotY + 3).attr({
                        id: temp_id + '_text',
                        zIndex: 999
                    }).add();
                }
            }
        });
    }

});
4

2 回答 2

2

在这里，我已经为你修好了。这是保存的图像：

导出的图像进行了以下更改：

  1. 向您的导出图表添加了重绘事件

    redraw: function () {
    $("#test_text").remove() ;
    draw_labels(this);
}

  2. 改变了这一行afterSetExtremes

    $('[id="test_text"]').remove();

    到

    $("#test_text").remove() ;

    之前的一个没有按预期工作，所以我不得不改变它。

于 2013-06-19T22:25:07.870 回答
0

文本消失的问题与 id 有关，当我删除它时，会出现标签。但后来我遇到了第二个问题，错误的 y 位置。所以我声明global variable，然后当你调用你的函数时，设置标签的位置，并在图表中使用导出这个变量。结果标签被正确导出。

http://jsfiddle.net/UGbpJ/11/

于 2013-06-20T14:09:16.980 回答