Highcharts: Legende unten mit benutzerdefiniertem marginBottom bereits

Wenn eine Legende unter dem Diagramm platziert wird, wird der untere Rand normalerweise automatisch bestimmt, damit alles gut passt.Highcharts: Legende unten mit benutzerdefiniertem marginBottom bereits

Aber ich habe ein Diagramm, das einige benutzerdefinierte Sachen am unteren Rand enthält, und daher musste ich marginBottom überschreiben. Dies beeinträchtigt die automatische Berechnung, wenn eine Legende auch unter dem Diagramm platziert wird.

Ich habe ein einfaches Modell in this jsfiddle gemacht, wo Sie die Legende aktivieren/deaktivieren und die Anzahl der Serien ändern können, um zu sehen, wie die Dinge durcheinander aussehen.

Ich vermute, dass ich wahrscheinlich die notwendigen Anpassungen an marginBottom selbst vornehmen muss, um die Legende zu erklären, aber wie?

Irgendeine Idee, wie ich das tun könnte?

EDIT: Ich denke, ich bin in der Nähe ... aber ich bin mir nicht sicher, ob ich den besten Weg gehe ... siehe this jsfiddle.

Quelle

2016-04-30 drmrbrewer

Was Sie in der zweiten Geige haben, scheint ziemlich gut von dem, was ich sehen kann. Ich habe eine ähnliche Situation mit einigen meiner eigenen Charts, und was Sie gebaut haben, wird für mich immens hilfreich sein. Bitte beachten Sie, dass Ihre Anpassungen die native Reaktionsfähigkeit des Charts beeinträchtigen (ich bin mir nicht ganz sicher, warum, und das mag kein Deal-Breaker für Sie sein). –

@brightmatrix Welcher Aspekt der nativen Reaktionsfähigkeit ist gebrochen? – drmrbrewer

Wenn Sie die Größe des Fensters in Ihrer Geige ändern, das das Diagramm enthält, sollte es automatisch an den Inhalt angepasst werden. Vergleichen Sie Ihre Geige mit der Demo hier: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/. –

Ich habe über diese Frage und deine aktualisierte Geige seit ein paar Wochen nachgedacht, und ich denke, ich habe sowohl dein erstes Problem als auch den reaktiven Bug, den ich in den Kommentaren angesprochen habe, gelöst.

In Ihrer chart Option fügte ich ein Ladeereignis hinzu, das die Reihe zum Zeitpunkt des Renderns einliest, im Gegensatz zur angehängten Funktion, die Sie nach den Optionen verwendet haben. Ich habe auch die explizite marginBottom Deklaration entfernt.

chart: { 
     type: 'line', 
     borderWidth: 1, 
     plotBorderWidth: 1, 
     events: { 
      load: function() { 
      for (var i = 0; i < numberOfSeries; i++) this.addSeries(basicSeries); 
      } 
     } 
    },

Was das bedeutet ist in der Anzahl der Serie ziehen (die man als statische Variable an der Spitze des Codes deklariert hat) und sie zur Laufzeit hinzufügen. Der Code von Highcharts passt dann automatisch den benötigten Platz unter Ihrem Diagramm an, um die Größe der Legende und ihrer Elemente anzupassen.

Hier ist eine aktualisierte Version Ihrer (aktualisiert) Geige mit diesen Änderungen: http://jsfiddle.net/brightmatrix/4fauh2bk/6/

Nebenbei bemerkt: Was die ansprechende Natur des Diagramms brach war der feste Breite-Wert in der chart.setSize() Funktion. Es scheint, als ob die Breite auto oder ein Prozentsatz (wie 100%) wird seine Fähigkeit zur Größenänderung beibehalten, aber das Diagramm muss möglicherweise neu gezeichnet werden, nachdem Sie die Funktion ausführen.

Quelle

2016-05-26 15:21:09

Highcharts: Legende unten mit benutzerdefiniertem marginBottom bereits

Antwort

Verwandte Themen