jsonデータでChart.jsでチャートを表示したいのですが表示できません。

Question

javaScript初心者です。
Chart.jsでデータをドーナツチャートで表示したいのですが、表示されずにエラーにもなりません。
ajaxでjsonデータを取得、jsonデータは取得できているようですが、チャートが描画されません。
やろうとしていることは、下記記載のテンプレートのチャート部分をjsonデータを取得して表示するように作っています。

javascript

                     $('#chartdata').click(function() {
    // ajax
    $.ajax(
     {
         
          'type': 'get',
      'dataType': 'json',
      'url': '/chartsJson',
      'success': function(data) {
         // alert(data.status);
          console.log( data );
          var charts = data.someChart;
 
          for(i=0;i<charts.length;i++){
              var chart = charts[i];
              
              for (var key in chart) {
  alert(key);
                    
                    var chartDatas = chart[key];
                      
                    //var doughnutData = [
                    var chartDataStr ='[';
                    for(j=0;j<chartDatas.length;j++){
                        var item = chartDatas[j];
                        alert(item.value);
                        chartDataStr = chartDataStr+'value: '+item.value+','+'color: '+item.color+',';
                        
                    }
                    chartDataStr = chartDataStr + ']'
                  
                    var myDoughnut = new Chart(document.getElementById(key).getContext("2d")).Doughnut(chartDataStr);

                }
              
          }
     
      },
      'error': function() {
          alert('ajax error');
     
      }
    });
         
  });          

json data

{"someChart":[{"javascript":[{"value":"30","color":"#f85c37"},{"value":"70","color":"#ecf0f1"}]},{"bootstrap":[{"value":"50","color":"#f85c37"},{"value":"50","color":"#ecf0f1"}]},{"laravel":[{"value":"70","color":"#f85c37"},{"value":"30","color":"#ecf0f1"}]}]}

環境情報：
os:mac
javascriptは下記のテンプレートのものを使用しています。
http://blacktie.co/2013/10/onassis-agency-one-page-theme/

Answer 1

Dougnutに渡すべきは、文字列ではなく、Javascriptのオブジェクトを期待してませんか？

Doughnut(chartDataStr);

JSONデータを取得して、そこから「文字列」を組み立てていますが、そこを適切な
「オブジェクト」なるようにしてみてください。具体的には下記のように、chartDatasを直接Doughnutに渡せば良さそうな気がします。

var chartDatas = chart[key];
Chart(document.getElementById(key).getContext("2d")).Doughnut(chartDatas);

Comments

[YSMS]

ありがとうございました！Chartの仕様がわかってなかったんですね、、ベンキョ不足でした！