하이 차트 마스터 세부 차트 렌더링되지 않음 두 번째 시리즈

Question

마스터 세부 정보 차트 설정에 문제가 있습니다. 처음에는 마스터 및 세부 그래프가 모두 라인 시리즈와 에러 바 시리즈를 그립니다. 그러나 마스터에서만 새 범위를 선택하면 선이 세부 사항 내에서 그립니다. (비록 마스터가 여전히 둘 다 그렸지만)

JSFiddle : http://jsfiddle.net/binpower93/za46Y/1/을 추가했습니다.

이

selection: function (event) { 
        var extremesObject = event.xAxis[0], 
         min = extremesObject.min, 
         max = extremesObject.max, 
         detailData = [], 
         xAxis = this.xAxis[0]; 

        // reverse engineer the last part of the data 
        jQuery.each(this.series, function (i, series) { 
         var data = []; 
         jQuery.each(series.data, function (i, point) { 
          if (point.x > min && point.x < max) { 
           data.push({ 
            x: point.x, 
            y: point.y 
           }); 
          } 
         }); 
         detailData.push(data); 
        }); 

        // move the plot bands to reflect the new detail span 
        xAxis.removePlotBand('mask-before'); 
        xAxis.addPlotBand({ 
         id: 'mask-before', 
         from: firstUTC, 
         to: min, 
         color: 'rgba(0, 0, 0, 0.2)' 
        }); 

        xAxis.removePlotBand('mask-after'); 
        xAxis.addPlotBand({ 
         id: 'mask-after', 
         from: max, 
         to: lastUTC, 
         color: 'rgba(0, 0, 0, 0.2)' 
        }); 

        jQuery.each(detailChart.series, function (i, series) { 
         detailChart.series[i].setData(detailData[i]); 
        }); 

        return false; 
       } 
      } 
     }, 

Answer 1

문제는 그 오류 시리즈는 X/Y/고/저 값이 필요합니다 : 그것은 다음의 코드 블록에서 발생 될 수 있지만

나는, 오류가 Highcharts 함께 할 수있는 뭔가 생각하는 , x/y뿐만 아니라. 따라서 두 번째 시리즈의 데이터를 설정할 때 NaN이 계산됩니다.

그 문제를 해결하는 간단한 방법 :

       data.push({ 
            x: point.x, 
            y: point.y, 
            high: point.high, 
            low: point.low 
           }); 

고정 예 : http://jsfiddle.net/za46Y/2/

작은 조언 : 더 많은 포인트 또는 시리즈를 추가/더 많은 데이터를 설정할 때, 다시 그리기 해제하고 다음과 같이 한 번에 전화 :

    jQuery.each(detailChart.series, function (i, series) { 
         series.setData(detailData[i], false); 
        }); 
        detailChart.redraw();