0

我有一个带有自定义图例框和复选框的 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>

提前致谢。

4

1 回答 1

0

我在您的代码中看到了两件事：

1) 您已经使用 Highstock.js 的相同代码在外部创建了图例

2) 您还添加了预览系列作为图例项目。

Highstockexporting.js用于导出图表。

它有一个方法exportChart并使用它调用的方法chart.getSVG。我对此表示怀疑，因为您的传说不是其中的一部分，因此只有图表会被导出。

它适用于Highstock 库中给出的示例。

我建议使用showCheckbox : true系列选项启用图例中的复选框。

然后，对于图例中的预览系列，您可以在代码中添加您的 hack。

于 2012-10-09T10:04:53.520 回答