Как получить пользовательские легенды к графу SVG в Highstock в функции экспорта?

У меня есть диаграмма Highstock с настраиваемой легендой и флажками. Все работает нормально. Но когда я пытаюсь экспортировать диаграмму в любой формат, например «png, jpeg, pdf», поле легенды не отображается. Это мой HTML-код:

  <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highstock Example</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
$(function() {
     $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
        // Create the chart     
        var options = {
            chart : {
                renderTo : 'container',
                plotBorderWidth: 1,
                marginRight: 130
            },

            rangeSelector : {
                selected : 1,
                inputEnabled: false
            },
            yAxis: {
                offset: 2,
                labels: {
                    align: 'right',
                    x: -8,
                    y: 6
                },
                showLastLabel: true,
                allowDecimals: false
            },

            title : {
                text : 'AAPL Stock Price'
            },
            legend: {
                enabled : false,
                align: 'right',
                verticalAlign: 'top',
                layout: 'vertical',
                borderWidth: 0,
                backgroundColor: '#e6e6e6',
                itemMarginTop: 5,
                itemMarginBottom: 5,
                lineHeight: 20,
                borderRadius: 0,
                symbolWidth: -1,
                symbolPadding: 20,
                itemWidth: 100,
                y: -10              
            },
            credits: {
                enabled: false
            },

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

    var chart1 = new Highcharts.StockChart(options);
    var legendOptions = chart1.options.legend;
    function clickItem(series, $line) {
        series.setVisible();
        $line.css({
            borderTop: '0px solid '+ (series.visible ? series.color :
                legendOptions.itemHiddenStyle.color)
        });
    }
    // Create the legend box
    var $legend = $('<div>')
    .css({
        width: 100,
        maxHeight: 100,
        padding: '10px 6px',
        position: 'absolute',
        overflow: 'auto',
        right: 5,
        top: 65,
        background: '#e6e6e6',
        'z-index': '1'
    })
    .insertBefore(chart1.container);


    jQuery.each(chart1.series, function(i, series) {
        // crete the legend item
        var pageName = series.name.split(/[\s]+/);
        var $legendItem = $('<div>')
        .css({
            position: 'relative',
            marginLeft: 20,
            marginBottom: 10,
            color: series.color
        })
        .html(pageName[0])
        .appendTo($legend);

        // create the line with each series color
        var $line = $('<div>')
        .html('<input type="checkbox" checked="checked"/>')
        .css({
            width: 16,
            position: 'absolute',
            left: -24,
            top: -6
        })
        .appendTo($legendItem);

        // click handler
        $legendItem.click(function() {
            clickItem(series, $line);
        });

    });
});
});

    </script>
</head>
<body>
    <script src="../../js/highstock.js"></script>
    <script src="../../js/modules/exporting.js"></script>

    <div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>

Заранее спасибо.


jquery highcharts highstock
person Anant Ghate    schedule 09.10.2012    source источник
comment
Можете ли вы сгенерировать скрипку с помощью этого кода?   -  person Hardik Mishra    schedule 09.10.2012
comment
Спасибо за ответ. Проверьте это: jsfiddle.net/anant_ghate/PqfqK   -  person Anant Ghate    schedule 09.10.2012
comment
Извините, но это не работает. Это работает с вашей стороны?   -  person Hardik Mishra    schedule 09.10.2012
comment
Извините, это правильный URL для неправильного URL: jsfiddle.net/anant_ghate/PqfqK/4   -  person Anant Ghate    schedule 09.10.2012

Ответы (1)


arrow_upward
0
arrow_downward

В вашем коде я увидел две вещи:

1) Вы создали легенду внешне, используя тот же код Highstock.js.

2) Вы также добавили серию «Предварительный просмотр» в качестве элемента легенды.

Highstock использует exporting.js для экспорта диаграммы.

У него есть метод exportChart, и с помощью этого метода он вызывает chart.getSVG. Я сомневаюсь, что ваша легенда не является частью этого, и поэтому экспортируется только диаграмма.

Он работает в пример из галереи Highstock.

Я бы предложил включить флажок в легенде, используя showCheckbox : true в параметрах серии.

Затем для серии превью в легенде вы можете добавить свой хак в код.

person Hardik Mishra    schedule 09.10.2012
comment
Я пробовал ваше решение, но безуспешно. На самом деле нам нужна полоса прокрутки в легендах. Мы пробовали свойство legends Navigation. Он дает стрелки вверх-вниз для перемещения. Но когда вы добавляете флажки, флажки не прокручиваются вместе с текстом легенды (см. jsfiddle.net/HAmgw/12 < / а>). - person Anant Ghate; 09.10.2012