페이지로드시 하이 차트 행에 enable 속성을 설정하는 방법

Question

내 요구 사항을 이해하려면 먼저이 데모를보아야합니다. highcharts demo . 데모 차트에서 도쿄를 클릭하면 도쿄 라인이 사라집니다. 이제 페이지로드시 해당 속성을 설정할 수 있습니다. 페이지를로드 할 때마다 토큰 링크를 클릭하고 한 줄만 표시해야합니다. 그러면 도쿄를 클릭하면이 표시됩니다. 그 데모 자체에서 소스 코드를 찾을 수 있습니다. 미리 감사드립니다.

Answer 1

나는 당신이 선택한 것이 단지 클릭 된 전설 시리즈 쇼를 만드는 방법이라고 생각합니다. 이 경우 plotOptions.series.events.legendItemClick으로 처리 할 수 ​​있습니다. 하나의 계열 만 처음에는 차트에 표시되지만 (범례에 계속 표시됨) 계열 'visible'을 true으로 설정하고 나머지는 false으로 설정해야합니다. 모든 시리즈에 초기로드가 표시되도록하려면 해당 단계를 무시할 수 있습니다.

토글을 작동 시키려면 클릭 한 범례 항목의 색인을 가져와야합니다. 그런 다음 차트의 모든 시리즈를 반복하여 클릭 한 색인과 일치하는 시리즈를 찾습니다. 일치 할 때 을 설정하지 않은 경우 series\[i\].show()을 설정하십시오.

series: { 
    events: { 
     legendItemClick: function (event) { 
      var seriesIndex = this.index; 
      var serie = this.chart.series; 
      console.log(seriesIndex); 
      for (i = 0; i < serie.length; i++) {     
       if (serie[i].index == seriesIndex) { 
        serie[i].show(); 
        console.log(serie[i].index); 
       } else { 
        serie[i].hide(); 
       } 
      } 
      return false; 
     } 
    } 
} 

그리고 여기에 라이브 fiddle입니다 :

다음은 기본 토글 코드입니다.

Answer 2

차트를 만들 때 기본적으로 숨겨져있는 계열에 대해 series.visible = false을 설정하면됩니다.

docs을 참조하십시오.