하이 차트 여러 축 데이터 세트로 차트 동기화

Question

날씨 데이터로 하이 차트 목록을 작성하려고합니다. 궁극적으로 날짜가 xAxis 인 약 5 개의 동기화 된 차트가 있습니다. 이 5 개의 차트는 각각 적어도 2 개의 yAxis를가집니다. Highchart synchronized 차트 예제에서이 메서드를 사용하여 x 및 y 축 설정을 과도하게 분석하지 않으려 고합니다.

데이터 형식 :

"datasets": [ 
     { 
     "name": "Temperature", 
     "data": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
     "unit": "F", 
     "type": "area", 
     "valueDecimals": 1 
     }, 
     { 
     "name": "Dewpoint", 
     "data": [[ 1464796500000, 66.94],[ 1464796800000, 66.79],[ 1464797100000, 66.79],[ 1464797400000, 66.97],[ 1464797700000, 67.47]], 
     "unit": "F", 
     "type": "area", 
     "valueDecimals": 1 
     }, 
     { 
     "name": "Relative Humidity", 
     "data": [[ 1464796500000, 89],[ 1464796800000, 88],[ 1464797100000, 88],[ 1464797400000, 88],[ 1464797700000, 89]], 
     "unit": "%", 
     "type": "line", 
     "valueDecimals": 1 
     } 
    ] 

Highchart API를 동기화 차트 예를 들어 내 수정 된 버전 : http://jsfiddle.net/bbw37zen/14/

내가 정말이 예제는 데이터 세트의 모든 정보가 필요한 것을하고 단순히 실행에 대해 같은 이 코드를 차트에 추가하십시오.

series: [{ 
    data: dataset.data, 
    name: dataset.name, 
    type: dataset.type, 
    color: Highcharts.getOptions().colors[i], 
    fillOpacity: 0.3, 
    tooltip: { 
     valueSuffix: ' ' + dataset.unit 
    } 
}] 

이제 주 질문입니다. 이 예제에서는 온도와 이슬점을 같은 그래프 (두 x 축이 같은 xAxis 날짜를 공유 함)에 결합 할 수 있습니까? 데이터 형식을 그대로 유지하려고합니다. 이 방법을 사용하여 두 개의 데이터 세트를 결합 할 수 있습니까? 아니면 yAxis 옵션/데이터를 이와 같은 방법으로 분해해야합니까? http://jsfiddle.net/kmuhw0zf/3/?

Answer 1

위대한 질문입니다.

데모는 몇 가지 데이터 집합을 반복하여 각 차트를 container<div> 요소에 추가합니다. 여러 개의 동기화 된 차트를 갖고 싶지만 여러 개의 시리즈로 구성된 차트가 있다면 차트를 분리해야합니다. 데모보다 효율성이 떨어지지 만 필요한 사용자 정의를 얻을 수 있습니다.

가 나는 같이 일하는 것이 상상 :

1. 자신의 변수로 설정, 개별적으로 각 차트과 옵션을 정의합니다.
2. 혼합 온도/이슬점 그래프의 경우 특정 차트의 옵션에서 두 데이터 세트를 별도의 시리즈로 추가하십시오.
3. 각 차트의 xAxis.events 속성에 setExtremes: syncExtremes이 포함되어 있는지 확인하십시오.

   $("<div class='CHART1'>").appendTo("#container").highcharts(chartOptions_CHART1); 
   $("<div class='CHART2'>").appendTo("#container").highcharts(chartOptions_CHART2); 
   // ... and so on 
   

에서 : 당신이 데이터를하여 차트의 각에 대한 옵션을 정의하고 할당하면

는, 하나 하나의 container<div> 요소에 추가하기 위해 jQuery를 appendTo() 기능을 사용 동기화가 작동하려면 각 차트가 container<div>에 있어야합니다.

업데이트 : 원래 포스터에서 관련 설명을 읽은 후, 나는 더 효율적으로 될 수 있음을 시도하는 또 다른 생각을했다.

이론적으로 데이터 세트의 각 항목에 차트로 표시하려는 두 항목을 모두 포함 할 수있는 이유가 없습니다.따라서, 귀하의 경우, 패키지 당신의 JSON 배열에 고유 한 이름과 데이터 요소와 동일한 차트를 공유 할 항목 :

"datasets": [ 
    { 
     "nameA": "Temperature", 
     "dataA": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
     "nameB": "Dewpoint", 
     "dataB": [[ 1464796500000, 66.94],[ 1464796800000, 66.79],[ 1464797100000, 66.79],[ 1464797400000, 66.97],[ 1464797700000, 67.47]], 
     "unit": "F", 
     "type": "area", 
     "valueDecimals": 1 
    }, 
    ... 
] 

나는 unit, type 및 valueDecimals이 함께있는 것을 여기에 있으리라 믿고있어. 그것들을 뚜렷하게 보이고 싶다면 그것들의 복제물을 만들뿐입니다. 여기

당신이 당신의 옵션에서 그 렌더링 할 방법은 다음과 같습니다

series: [{ 
    data: dataset.dataA, 
    name: dataset.nameA, 
    type: dataset.type, 
    color: Highcharts.getOptions().colors[i], 
    fillOpacity: 0.3, 
    tooltip: { 
     valueSuffix: ' ' + dataset.unit 
    }, 
    yAxis: 0 
}, { 
    data: dataset.dataB, 
    name: dataset.nameB, 
    type: dataset.type, 
    color: Highcharts.getOptions().colors[i], 
    fillOpacity: 0.3, 
    tooltip: { 
     valueSuffix: ' ' + dataset.unit 
    }, 
    yAxis: 1 
}] 

이 방법, 당신은 당신의 요구 사항을 원래 바이올린의 단순성을 유지 할 수있다.

Answer 2

사용할 y 축을 지정하십시오. 차트 당 여러 개의 Y 축을 포함 할 수 있습니다. 당신은 단지 지정해야합니다. 자바 스크립트 데이터 세트 통화에서

:

"datasets": [ 
    { 
    "name": "Temperature", 
    "data": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
    "unit": "F", 
    "type": "area", 
    "valueDecimals": 1, 
    **"yAxis": 0** 
    }  
] 

그들은 기준으로 0, 그래서 그런 식으로에서 지정할 또는 축에게 ID를 제공합니다. 차트의 특정 축 init. 당신의 축 정의에 진정한 '

당신은 축이 단순히`'반대 '를 추가, 오른쪽에 표시합니다.

http://api.highcharts.com/highcharts#yAxis