HighChartsはデータ属性を使用できません

Question

私はHighChartsを使用して自分のサイトにグラフを表示しています。 http://www.highcharts.com/

私のグラフdivでは、グラフを作成するためにjavascriptで使用する必要があるデータ属性を作成しました。

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

私はこれを行うには、私のJavaScriptでデータ属性を参照し、

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>