ID가 하나 인 하이 차트를 여러 개 가질 수 있습니까?

Question

나는이 haml 다음 시나리오 :

#ownershipChart{"chart-data" => [["pie1", 100], ["pie2", 150], ["pie3", 200]]} 
#ownershipChart{"chart-data" => [["pie4", 45], ["pie5", 50], ["pie6", 20]]} 

와 자바 스크립트

:

$(function(){ 
    $('#ownershipChart').highcharts({ 
    chart: { 
     type: 'pie' 
    }, 
    title:{ 
     text: 'Ownership' 
    }, 
    plotOptions:{ 
     pie:{ 
     allowPointSelect: true 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Ownership', 
     data: $('#ownershipChart').attr('chart-data') 
    }] 
    }); 
}); 

당신은 내가 이들 두 차트에 걸쳐 적용 하나 개 highcharts 기능을 만들려고 해요 알 수 있듯이 같은 시간. 먼저 $('#ownershipChart').attr('chart-data')이 아무 것도 반환하지 않기 때문에 이것이 틀렸다는 것을 알고 있습니다. 둘째, 이것에 대해 생각하는 것이 올바른 방법일까요? 나는 동적으로 hamldiv id="ownershipChart"을 생성하고 있으므로, 매번 highcharts js 객체가 동적으로 생성 될 때마다 오류가 발생합니다.

divid이 첨부되어있을 때 여러 개의 하이 차트를 생성하는 가장 좋은 방법은 무엇인지 알 수없고 사용자별로 다릅니다.

Answer 1

대신 클래스를 사용하고 각 인스턴스를 반복하여 차트를 만들 수 있습니다. 이런 일 : 데이터 수단 data 속성 this에 참고로 채워진 것을

$(function() { 
    $('.ownershipChart').each(function() { 
     $(this).highcharts({ 
      chart: { 
       type: 'pie' 
      }, 
      title: { 
       text: 'Ownership' 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Ownership', 
       data: $(this).attr('chart-data') 
      }] 
     }); 
    }); 
}); 

참고, 반복의 전류 소자로부터 판독된다.