Spaltenbreite in Highcharts in Kombination mit Spline

Question

Ich habe diese lästige Sache in Highcharts, die ich nicht herausfinden kann. Ich habe Graphen, die dynamisch generiert werden und mehrere Spalten und Splines enthalten können. Im Beispiel ist der Spline eine Temperaturmessung und enthält viele Datenpunkte. Die zwei Spalten sind nach Tag gruppiert und enthalten daher nur einen Wert pro Tag.

Wenn ich diese Kombination die Spaltenbreite verwenden wird fast unsichtbar: http://jsfiddle.net/FXRj2/

 series: [{ 
      name: 'Rainfall 1', 
      color: '#4572A7', 
      type: 'column', 
      yAxis: 1, 
      data: [[1374105600000,1461.77],[1374192000000,1473.67],[1374278400000,1122.47], 
        [1374364800000,1170.16],[1374451200000,1436.88],[1374537600000,1383.57], 
        [1374624000000,9.73]], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Rainfall 2', 
      color: '#red', 
      type: 'column', 
      yAxis: 2, 
      data: [[1374105600000,3.28],[1374192000000,2.95],[1374278400000,3.12], 
        [1374364800000,3.8],[1374451200000,3.61],[1374537600000,0.39]], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Temperature', 
      color: '#89A54E', 
      type: 'spline', 
      data: [[1374105600000,21.9],[1374109200000,21.6],[1374112800000,21.2], 
        [1374116400000,20.8],[1374120000000,20.5],[1374123600000,20], 
        [1374127200000,19.7],[1374130800000,19.6],[1374134400000,19.9], 
        [1374138000000,20.3],[1374141600000,20.9],[1374145200000,21.4], 
        [1374148800000,21.9],[1374152400000,22.5],[1374156000000,23.1], 
        [1374159600000,23.5],[1374163200000,23.9],[1374166800000,23.7], 
        [1374170400000,23.8],[1374174000000,23.3],[1374177600000,23.1], 
        [1374181200000,22.4],[1374184800000,21.9],[1374188400000,21.4], 
        [1374192000000,21],[1374195600000,20.4],[1374199200000,20.1], 
        [1374202800000,19.7],[1374206400000,19.3],[1374210000000,19], 
        [1374213600000,18.7],[1374217200000,18.9],[1374220800000,19.3], 
        [1374224400000,19.8],[1374228000000,20.6],[1374231600000,21.4], 
        [1374235200000,22.1],[1374238800000,22.6],[1374242400000,23.2], 
        [1374246000000,23.5],[1374249600000,23.5],[1374253200000,23.5], 
        [1374256800000,23.1],[1374260400000,23],[1374264000000,22.4], 
        [1374267600000,22],[1374271200000,21.4],[1374274800000,21.2], 
        [1374278400000,20.6],[1374282000000,20.2],[1374285600000,20.3], 
        [1374289200000,20.2],[1374292800000,20],[1374296400000,19.7], 
        [1374300000000,19.3],[1374303600000,19],[1374307200000,18.9], 
        [1374310800000,19],[1374314400000,19.2],[1374318000000,19], 
        [1374321600000,19.7],[1374325200000,19.8],[1374328800000,20.2], 
        [1374332400000,20.6],[1374336000000,21],[1374339600000,21.6], 
        [1374343200000,21.8],[1374346800000,22.1],[1374350400000,22.3], 
        [1374354000000,22.1],[1374357600000,21.5],[1374361200000,21.1], 
        [1374364800000,20.6],[1374368400000,20.1],[1374372000000,19.7], 
        [1374375600000,19.4],[1374379200000,19],[1374382800000,18.6], 
        [1374386400000,18.2],[1374390000000,18.2],[1374393600000,18.6], 
        [1374397200000,19.4],[1374400800000,20.4],[1374404400000,21.6], 
        [1374408000000,22.9],[1374411600000,24.2],[1374415200000,25.4], 
        [1374418800000,26.5],[1374422400000,27.2],[1374426000000,27.8], 
        [1374429600000,28.3],[1374433200000,28.5],[1374436800000,28.4], 
        [1374440400000,27.8],[1374444000000,27.1],[1374447600000,26.2], 
        [1374451200000,25.7],[1374454800000,25],[1374458400000,24.3], 
        [1374462000000,23.8],[1374465600000,23.1],[1374469200000,22.5], 
        [1374472800000,22.1],[1374476400000,22.2],[1374480000000,22.5], 
        [1374483600000,23.1],[1374487200000,23.9],[1374490800000,24.9], 
        [1374494400000,26.1],[1374498000000,27],[1374501600000,27.8], 
        [1374505200000,28.4],[1374508800000,28.9],[1374512400000,29.1], 
        [1374516000000,29.2],[1374519600000,29],[1374523200000,28.7], 
        [1374526800000,28.5],[1374530400000,27.7],[1374534000000,27.3], 
        [1374537600000,26.8],[1374541200000,26.5],[1374544800000,25.9], 
        [1374548400000,25.4],[1374552000000,24.8],[1374555600000,24.1], 
        [1374559200000,23.6],[1374562800000,23.5],[1374566400000,23.8], 
        [1374570000000,24.3],[1374573600000,24.9],[1374577200000,25.5], 
        [1374580800000,25.7],[1374584400000,26.3],[1374588000000,27.3], 
        [1374591600000,28.1],[1374595200000,28.5],[1374598800000,28.9], 
        [1374602400000,29],[1374606000000,29.4],[1374609600000,29.1], 
        [1374613200000,28.9],[1374616800000,28.2],[1374620400000,27.6], 
        [1374624000000,26.9],[1374627600000,26.2],[1374631200000,25.6], 
        [1374634800000,25.1],[1374638400000,24.6],[1374642000000,24.3], 
        [1374645600000,23.7],[1374649200000,23.6],[1374652800000,23.5], 
        [1374656400000,23.9],[1374660000000,24.4],[1374663600000,24.4], 
        [1374667200000,24.3],[1374670800000,24.9],[1374674400000,25.9], 
        [1374678000000,26.3]], 
      tooltip: { 
       valueSuffix: '°C' 
      } 
     }] 

Wenn ich die Daten für die Temperatur der Spalte ‚Wieder nehmen‘ ihre normale Breite Verhalten zu entfernen: http://jsfiddle.net/K9DxS/

 series: [{ 
      name: 'Rainfall 1', 
      color: '#4572A7', 
      type: 'column', 
      yAxis: 1, 
      data: [[1374105600000,1461.77],[1374192000000,1473.67],[1374278400000,1122.47], 
        [1374364800000,1170.16],[1374451200000,1436.88],[1374537600000,1383.57], 
        [1374624000000,9.73]], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Rainfall 2', 
      color: '#red', 
      type: 'column', 
      yAxis: 2, 
      data: [[1374105600000,3.28],[1374192000000,2.95],[1374278400000,3.12], 
        [1374364800000,3.8],[1374451200000,3.61],[1374537600000,0.39]], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Temperature', 
      color: '#89A54E', 
      type: 'spline', 
      data: [], 
      tooltip: { 
       valueSuffix: '°C' 
      } 
     }] 

Ich habe nach Möglichkeiten gesucht, um die Breite von Spalten dynamisch zu steuern, indem Sie PointWidth verwenden, aber dies bringt mich in ein neues Problemfeld, da ich nicht immer s bin ure, wenn es eine Kombination aus Spalten und Splines gibt und der Datumsbereich ist.

Gibt es einen Trick, um das zu lösen? Ich hoffe ich habe etwas Einfaches verpasst.

PS: Post bekam ein bisschen lang, aber Stackoverflow beharrte ich Code mit meiner jsfiddle Links eingefügt ...

Answer 1

Ich kann nicht diese Art von Dingen stehen ... Es war mir seit Wochen nervt und heute habe ich mich entschieden, auf stackoverflow zu posten. Um meinen Fall weiter zu unterstützen, las ich die API-Beschreibung von Highcharts, als ich eine Option bemerkte, mehrere x-Achse zu haben. Da mein Problem mit der Skalierung auf der x-Achse in Zusammenhang zu stehen schien, entschied ich, es zu versuchen ...

Ich erstellte eine neue X-Achse für die Zeilendaten und es funktioniert wie ein Charme. Natürlich wollen wir nicht mehrere X-Achsen sehen, also verbirgt sich ein wenig an den Einstellungen, um sie wieder zu verstecken.

My x-Achse definiation sieht nun wie folgt aus:

xAxis: [{ 
    type: 'datetime', 
},{ 
    type: 'datetime', 
    lineWidth: 0, 
    minorGridLineWidth: 0, 
    lineColor: 'transparent', 
    opposite: true, 
    labels: { 
     enabled: false 
    }, 
    minorTickLength: 0, 
    tickLength: 0 
}], 

Auf der Datenreihe, die ‚zu viel‘ Punkte, die ich einfach hinzugefügt ‚xAchse: 1‘ hat.

Fiddle hier: http://jsfiddle.net/AM4vx/