2013-07-24 3 views
5

알아낼 수없는 고 차트에서이 성가신 일이 있습니다. 동적으로 생성되고 여러 열과 스플라인을 포함 할 수있는 그래프가 있습니다. 이 예에서 스플라인은 온도 측정이며 많은 데이터 요소를 포함합니다. 두 개의 열은 하루 단위로 그룹화되므로 하루에 하나의 값만 포함합니다. I는이 조합을 사용하면스플라인 결합시 하이 차트의 열 너비

열의 폭은 거의 보이지된다 : http://jsfiddle.net/K9DxS/

: 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' 
      } 
     }] 

I는 열 정상적인 폭의 행동을 "재 테이크 '온도의 데이터를 제거 할 때

 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' 
      } 
     }] 

저는 pointWidth를 사용하여 동적으로 열의 너비를 제어하는 ​​방법을 찾고 있었지만 이것은 항상 새로운 문제 영역으로 연결됩니다. 열과 스플라인의 조합이 있고 날짜 범위가 무엇인지 확인하십시오.

해결 방법이 있습니까? 나는 무언가를 놓치기를 바란다.

PS : 포스트는 조금 오래 가지고 있지만, StackOverflow의 그것은 주 동안 나를 귀찮게했다 ... 나는

답변

4

나는 사물의 이러한 종류를 참을 수 없어 ... 내 jsfiddle 링크 코드를 삽입 주장하고 오늘 나는 stackoverflow에 게시하기로 결정했습니다. 내 사례를 더 돕기 위해 여러 x 축을 가질 수있는 옵션을 발견했을 때 Highcharts의 API 설명을 읽었습니다. 내 문제는 x 축의 스케일링과 관련이있는 것처럼 보였으므로, 나는 그것을 내리기로 결정했다. ...

나는 선 데이터를위한 새로운 x 축을 만들었고 그것은 매력처럼 작동한다. 물론 우리는 여러 개의 x 축을보고 싶지 않으므로 설정을 조금만 들여다가 다시 숨 깁니다.

내 X 축 definiation는 이제 다음과 같습니다

단순히 'x 축 : 1'추가 '너무 많은'지점이 데이터 계열에
xAxis: [{ 
    type: 'datetime', 
},{ 
    type: 'datetime', 
    lineWidth: 0, 
    minorGridLineWidth: 0, 
    lineColor: 'transparent', 
    opposite: true, 
    labels: { 
     enabled: false 
    }, 
    minorTickLength: 0, 
    tickLength: 0 
}], 

. 여기

바이올린 : http://jsfiddle.net/AM4vx/

+0

당신에게 나의 사랑, 나의 영웅이다. – ETFairfax