Highcharts styling, Legende & benutzerdefinierte Schriftarten

Ich habe ein problem mit styling-Elementen der Legende in Highcharts, wenn man einen Benutzerdefinierte Schriftart um die legend-Elemente. Tatsächlich Elemente sind so nah beieinander und itemMarginBottom und itemMarginTop nicht arbeiten.

Hier ist ein Teil meiner Highcharts code:

legend: {
    enabled: true,
    y: 20,
    align: 'right',
    verticalAlign: 'top',
    margin: 30,
    width: 200,
    borderWidth: 0,
    itemMarginTop: 15,
    itemMarginBottom: 15,
    itemStyle: {
            color: '#000',
            fontFamily: 'MuseoS500'
    }
},

Und hier ist die Legende screenshot:

Highcharts styling, Legende & benutzerdefinierte Schriftarten

Meine Hässliche Lösung:

Ich löste das Problem wie unten, aber leider hart codiert:

//it is for the text's in the legend, I'll start from 0 and will
//increase by 10, so it's adding 10 pixels extra space to the next one
var z = 0;    

//this is for tiny-lines near the texts in legend, they starts from 14
//and increasing by 14 also ...
var p = 14;

//loop through <text> tags, which are texts in the lgened
$('.highcharts-legend > text').each( function (i) {

    //they have 'x' and 'y' attribute, I need to work on 'y' obviously
    y = parseInt($(this).attr('y'));

    //increasing 'y' value ...
    $(this).attr('y', y + z);

    //next element is <path>, the colorful lines ...
    $(this).next().attr('transform', 'translate(30,' + p + ')');

    //increasing the values, for the next item in the loop ...
    z = z + 10;
    p = p + 10 + 14;

});

Ich weiß, dass es so dumm, aber ich konnte Sie nicht lösen, die in jeder anderen Hinsicht, und ich hatte, um Sie zu machen funktioniert irgendwie. Ich wäre froh zu hören, Ihre Gedanken ... 🙂

Den neuen Legenden-nach dem patch:

Highcharts styling, Legende & benutzerdefinierte Schriftarten

könnte es ein bug? Ich meine es sieht komisch aus ... 🙁
Wahrscheinlich bin ich etwas fehlt, aber ich nicht sehen, nichts falsch mit, dass sich der screenshot.
der Rand oben und unten sind auf 15 festgelegt, aber Sie können nicht sehen ... ich habe das Problem gelöst mit JS, poste es hier bald. 🙂
Ja, wäre vielleicht besser, zeigen eine Grenze auf, die Legende, Bild, Art und Weise würde konnte sehen, wie der Unterschied in den Gewinnspannen.
Ich habe aktualisiert die Frage mit meiner eigenen Lösung. Das problem war der Abstand zwischen Elementen in der Legende (wie line-height), nicht die Margen der Legende frame. BTW, es ist klar, auch ohne Grenze, denke ich. 🙂

InformationsquelleAutor Mahdi | 2012-10-08

Schreibe einen Kommentar