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:
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:
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. 🙂
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den Highchart-Dokumentation sagt, dass es eine Eigenschaft namens
lineHeight
aber Seine veraltet seit Highcharts 2.1Den posten des offiziellen Highcharts forum bestätigt auch die gleichen. Also, Entweder können Sie hack source code so ändern Sie die Höhe nach Ihrem Bedarf oder Versuchen, das zu korrigieren Element Höhe mit javascript-Code nach dem Diagramm machen.
Außerdem gibt Es ein Attribut namens
itemStyle
die es erlaubt, zu legen Sie CSS für die Legende Element.z.B.
paddingBottom: '10px'
Überprüfen Sie die Beispiel :
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/lineheight/
itemStyle.padding
zu5
.Dank Hardik, wie Sie sehen können habe ich schon beheben, aber du hast Recht und vielen Dank für die Informationen! 🙂
InformationsquelleAutor Hardik Mishra