HighCharts에서 데이터 속성을 사용할 수 없습니다.

Question

HighCharts를 사용하여 내 사이트에 그래프를 표시하고 있습니다. http://www.highcharts.com/

그래프 div에 그래프를 채우기 위해 자바 스크립트에서 사용해야하는 데이터 속성을 만들었습니다.

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto" data-mydata="{name: 'Test', data: [1,2,3,4,5]}"></div> 

내가 이렇게 내 자바 스크립트에서 데이터 속성을 참조

,

series: [ 
      $('#container').data("mydata") 
     ] 

데이터가 그래프에 렌더링되지 않습니다 (오류 - 빈 그래프 렌더링). 여기에 내가보고있는 것의 작동하지 않는 예가 있습니다. 나는 그 데이터가 유효하고 유효하다는 것을 알기 위해 데이터에 경고한다.

http://jsfiddle.net/a30oap8h/1/

그때 복사하고 데이터 - 속성과 코드에 하드 코드를에서 데이터를 붙여 넣을 경우

,

series: [ 
      {name: 'Test', data: [1,2,3,4,5]} 
     ] 

는 그것을 잘 작동합니다.

데이터 속성을 사용하려면 어떻게해야합니까?

Answer 1

$ ('# container') 데이터 ("mydata") 표현식이 문자열을 가져 오려면 객체로 변환해야합니다. 그것에 대해 http://jsfiddle.net/kofijita/kpa4g1d3/1/

$(function() { 
 
var data = $('#container').data("mydata"); 
 
data = eval(data); 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      
 
     }, 
 
     title: { 
 
      text: 'Monthly Average Temperature', 
 
      x: -20 //center 
 
     }, 
 
     subtitle: { 
 
      text: 'Source: WorldClimate.com', 
 
      x: -20 
 
     }, 
 
     xAxis: { 
 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Temperature (°C)' 
 
      }, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 1, 
 
       color: '#808080' 
 
      }] 
 
     }, 
 
     tooltip: { 
 
      valueSuffix: '°C' 
 
     }, 
 
     legend: { 
 
      layout: 'vertical', 
 
      align: 'right', 
 
      verticalAlign: 'middle', 
 
      borderWidth: 0 
 
     }, 
 
     series: [ 
 
     \t data 
 
     ] 
 
    }); 
 
});

<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto" data-mydata='{"name": "Test", "data": [1,2,3,4,5]}'></div>