Szerokość kolumny w Highcharts w połączeniu z splajtem

Question

Mam tę denerwującą rzecz w Highcharts, której nie mogę rozgryźć. Mam wykresy, które są generowane dynamicznie i mogą zawierać wiele kolumn i splajnów. W tym przykładzie splajn jest pomiarem temperatury i zawiera wiele punktów danych. Dwie kolumny są pogrupowane według dnia i dlatego zawierają tylko jedną wartość dziennie.

Kiedy używać tej kombinacji szerokość kolumna staje się prawie niewidoczne: 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' 
      } 
     }] 

Kiedy usunąć dane dla temperatury kolumn „ponownego podjęcia” ich normalne zachowanie szerokość: 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' 
      } 
     }] 

Szukałem sposobów, aby dynamicznie kontrolować szerokość kolumn za pomocą pointWidth, ale to doprowadza mnie do dziury w nowym obszarze problemów, ponieważ nie zawsze jestem jeśli jest kombinacja kolumn i splajnów i jaki jest zakres dat.

Czy istnieje podstęp, aby rozwiązać ten problem? Mam nadzieję, że przegapiłem coś prostego.

PS: post dostał trochę długo, ale StackOverflow nalegał I dodaje kod z moich jsfiddle linków ...

Answer 1

Nie mogę znieść tego rodzaju rzeczy ... To był podsłuch mnie przez kilka tygodni i dzisiaj zdecydowałem się opublikować na stackoverflow. Aby jeszcze bardziej pomóc w mojej sprawie, czytałem opis interfejsu API Highcharts, gdy zauważyłem opcję posiadania wielu osi X. Ponieważ mój problem wydawał się związany ze skalowaniem na osi X, postanowiłem dać mu szansę ...

Stworzyłem nową oś X dla danych linii i działa jak urok. Oczywiście nie chcemy widzieć wielu osi X, więc odrobina manipulowania ustawieniami ukrywa je ponownie.

Moja oś x definiation teraz wygląda tak:

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

Z serii danych, które ma „za dużo” punkty po prostu dodana „OśX: 1”.

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