顯示在C3（D3）JSON格式

如何在C3（或D3）示出的數據在此基礎上JSON格式圖表：顯示在C3（D3）JSON格式

[{"Type":"Dog","Number":13},{"Type":"Cat","Number":21}]

這裏是從JSON數據的角控制器和問題是在限定keys屬性附加傷害。我是一個利特爾有點困惑與號碼合併類型..請看看在plunker

angular.module('c3example', []) 
    .controller('ExampleCtrl', function($scope){ 
    d3.json('/chartData.json', function(err, data){ 
     if(err){ throw err; } 
     $scope.data = data; 

     $scope.chart_types = c3.generate({ 
      bindto: d3.select('#chart'), 
      size: { 
       weight: 640, 
       height: 480 
      }, 
      data: { 
       json: $scope.data, 
       keys: { 
        value: ['Dog', 'Cat'], 
       }, 
       type: 'bar' 
      }, 
     bar: { 
      width: { 
       ratio: 0.5 // 
      } 
     } 
     }); 
    }); 
    })

而在HTML綁定：

<!DOCTYPE html> 
    <html> 
     <body ng-app="c3example" ng-controller="ExampleCtrl"> 
     <div class="row"> 
      <div id="chart" build-chart></div> 
     </div> 
     </body> 
    </html>

來源

2016-02-13 corry

不幸的是，plunker甚至不加載JSON –

感謝塔馬斯，我已經更新了。 – corry

其實你的鑰匙枚舉陣列具有相匹配的JSON包含值的鍵：

替換：

[{"Type":"Dog","Number":13},{"Type":"Cat","Number":21}]

通過：

[{"Dog":13, "Cat":21}, {"Dog":42, "Cat":31}, ...]

注意：您可能會考慮使用小寫鍵來避免錯誤。

編輯：這是你的控制器應如何像

angular.module('c3example', []) 
    .controller('ExampleCtrl', function($http, $scope) { 
    $http.get('chartData.json') // Use angular $http instead of d3.json to use promise chaining 
     .then(function (json) { 
     $scope.data = formatData(json.data); // format received data 

     // generate chart 
     $scope.chart_types = c3.generate({ 
      bindto: d3.select('#chart'), 
      size: { 
      weight: 640, 
      height: 480 
      }, 
      data: { 
      json: $scope.data, 
      keys: { 
       value: ['Dog', 'Cat'], 
      }, 
      type: 'bar' 
      }, 
      bar: { 
      width: { 
       ratio: 0.5 
      } 
      } 
     }); 
     }, 
     function (err) { 
     console.log(err); // log if an error occurs 
     }); 

    // function that take you raw data into input and return a c3 compatible array 
    function formatData (json) { 
     var formattedData = [], 
      object  = {}; 

     // fill object with data 
     angular.forEach(json, function(row) { 
     if (row.hasOwnProperty('Type') && row.hasOwnProperty('Number')) { 
      this[row.Type] = row.Number; 
     } 
     },object); 

     formattedData.push(object); // push c3 object in the array 

     return formattedData; 
    } 
    })

來源

2016-02-13 15:48:10 Freezystem

這會很好，但我不能改變數據結構:( – corry

hmm ..所以你必須改變它們才能使用它。一旦我弄清楚如何，我會更新我的答案。 – Freezystem

顯示在C3（D3）JSON格式

回答

相關問題