1

这是我的问题：

我在不同的标签下有多个图表。加载图表后，我添加 SVG 文本和矩形以在绘图后显示附加图例。每个图表可能有不同的图例，其长度可能会有所不同，因此所需的空间可能会有所不同。

我使用 spacingBottom 值来允许显示图例的空间。我可以在加载图表之前手动设置此值（如下例所示），但如果更改了图例中的文本，则可能需要做很多工作。

我该怎么做才能根据图例容器的高度将 spacingBottom 值设置为所需的数字？

这个例子可以在这里看到：

http://jsfiddle.net/aNLSz/1/

$(function () {
    var myLegends = [
        '*: Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    '<strong>NP</strong>: Pellentesque in sapien diam, ac tristique dolor. Curabitur sit amet est nunc, eget egestas neque.',
    '<strong>NP</strong>: Pellentesque sollicitudin ultrices tristique. Aenean pharetra nulla eget turpis tincidunt vulputate. Sed pulvinar nisi et ante iaculis vulputate.',
    '<strong>*</strong> Donec elit enim, fermentum sit amet varius a, feugiat at nunc. Aliquam ac mi eu nunc dapibus interdum. ',
    '<strong>**</strong> Proin rutrum tincidunt sollicitudin. Vestibulum sit amet dui odio. Suspendisse potenti. Integer accumsan iaculis est ut tempor. ',

];

function drawLegend(chart, legends) {
    //Si il y a des légendes, les ajouter
    var selectedLegends = '';
    var myBoxHeight = 12;
    textY = chart.chartHeight - chart.options.chart.spacingBottom + 25;
    if (legends.length != 0) {

        var counter = 0;
        for (counter = 0; counter < legends.length; counter++) {
            legendNum = legends[counter];
            selectedLegends += myLegends[legendNum] + '<br/>';
        }
        selectedLegends += '<span style="color: #EEEEEE">.</span><br/>';

    }

        var text = chart.renderer.text(selectedLegends, 15, textY).attr({
            zIndex: 5
        }).css({
            color: '#222222',
            fontSize: '9.5px',
            lineHeight: '12px',
            width: (Math.min(chart.chartWidth - 30,650)) + 'px'
        }).attr({
                'xml:space': 'preserve'
            }).add();
        var box = text.getBBox();

        var legendContainer = chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
            .attr({
            fill: '#EEEEEE',
            stroke: '#B8B8B8',
            'stroke-width': 1,
            zIndex: 4
        })
            .add();
        console.log (legendContainer.height);
        //Need to do something like this:
        //chart.options.chart.spacingBottom = legendContainer.height + 10;

}

    $('#container').highcharts({
        chart: {
            type: 'line',
            borderWidth: 1,
            spacingBottom: 100,
            plotBorderWidth: 1,
            events: {
                        load: function () {
                            drawLegend(this, [1,2,3]);
                        }
                    }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {   
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        plotOptions: {
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

也许除了spacingBottom 选项之外还有更好的方法来管理这个问题？

4

0 回答 0