0

チャートのエクスポートに関する質問があります。

こちらのJsfiddleをご覧ください

chart.renderer.textシリーズの最新値の Yaxis を使用してテキスト ラベルを追加しました。

「画像のエクスポート」ボタンを直接クリックすると。問題なく、ラベル表示可能です。次の方法で画像をエクスポートしています。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