創建從數據在本地（對象）JSON文件餡餅highchart

這是我的JSON文件創建從數據在本地（對象）JSON文件餡餅highchart

{ 「磁盤空間」我的JSON數據：100，「diskspace.free」：50，「時間「：8，」 time.played 「：2」，控制器「：25，」 controllers.used「：3，」controllers.new「：10 」controllers.broken「：12}

什麼我試圖做的是以餅圖的幾種形式顯示上面的Json數據。例如，一個餅圖將顯示diskspace/diskspace.free，它基本上是50％的圖表。

問題是，我無法從顯示的格式中獲取要從Json文件中顯示的數據。但是，如果我將文件中的json數據更改爲列和行格式，我設法找到顯示它的方式，但這很不方便，因爲我需要爲每個圖表創建單獨的json文件。

現在所有它返回的是一個空白頁，我相信它包含一個空的圖表，因此它不可見。

這裏是我的JS

var app = angular.module('charts', []); 

app.directive('highchart', function() { 
return { 
    restrict: 'E', 
    template: '<div></div>', 
    replace: true, 

    link: function (scope, element, attrs) { 

     scope.$watch(function() { return attrs.chart; }, function() { 

      if (!attrs.chart) return; 

      var charts = JSON.parse(attrs.chart); 

      $(element[0]).highcharts(charts); 

     }); 
    } 
}; 
}); 


app.controller('Ctrl', function ($scope, $http, $timeout) { 
$http.get('bla.json').success(function (key, data) { 

    // var score = []; 
    // for (var i = 0; i < data.length; i++) { 
    //  score.push(data[i]); 
    // } 

    // var name = []; 
    // for (var i = 0; i < data.length; i++) { 
    //  name.push(data[i].key); 
    // } 

    $scope.renderChart = { 
     chart: { 
      type: 'pie' 
     }, 

     series: [{ 
      data: data 
     }], 
     legend: { 
      enabled: true 
     } 
    }; 
}).error("error message"); 
$timeout($scope.fetch, 1000); 
});

HTML

<!DOCTYPE> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Dashboard Application</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
</head> 
<body> 
    <section ng-app="charts"> 
    <div ng-controller="Ctrl"> 
     <highchart chart='{{renderChart}}'></highchart> 
     <table> 
      <tr ng-repeat="record in overSpeedWorstRecords"> 
       <td></td> 
       <td></td> 
      </tr> 
     </table> 
    </div> 
    </section> 
</body> 
</html>

我還創建了一個plunker LINK可以隨意調整它，你的幫助是非常讚賞。

來源

2016-02-17 Luka

你的格式不是很容易解析。我的意思是，在鍵你有不同的名字，這很難定義解析規則。爲什麼不使用這樣的事情：

{ 
    "diskspace": [ 
    ["total", 100], 
    ["free",50] 
    ], 
    "time": [ 
    ["total", 8], 
    ["played", 2] 
    ], 
    "controllers": [ 
    ["total", 25], 
    ["used", 3], 
    ["new", 10], 
    ["broken",12] 
    ] 
}

現在，您可以創建多個餅圖：http://plnkr.co/edit/AqVbfE3mxCf7ahAfKtRG?p=preview

爲控制器簡單的改進：

var series = [], 
    iterator = 1; 

for (var key in keys) { 
    series.push({ 
    data: keys[key], // add data from the new format 
    center: [(25 * iterator) + '%', '50%'] // calculate where center of the pie should be 
    }); 
    iterator++; 
}; 

$scope.renderChart = { 
    chart: { 
     type: 'pie' 
    }, 
    plotOptions: { 
     pie: { 
     size: '25%' // change size of the pies 
     } 
    }, 
    series: series, 
    legend: { 
     enabled: true 
    } 
};

注：我不知道究竟怎麼了這些圖表應該呈現（時間vs time.played或時間+ time.played vs time.played？）作爲餅圖。在我看來，可能是您的用例更好的選擇：http://plnkr.co/edit/Bydq5NG6BkG2LOqhQwzF?p=preview

來源

2016-02-17 14:03:18

感謝您的幫助Pawel，問題是我沒有重新格式化我的JSON數據的奢侈品，因爲我打算使用一個由服務器生成的JSON文件，其中包含我在開始時顯示的格式的數據。所以我必須使用那個（沒有數組的所有數據在1個對象中）格式。是不是可以用我最初發布的相同JSON格式來做到這一點？ – Luka

我明白了。這可能很難，但這是一個普遍的想法，我將如何解析這些數據：http://plnkr.co/edit/HgBt03nwcf0jbHtuJyoD?p=preview –

再次感謝你，這非常有幫助。如果你不介意我詢問另外一件事，如果你看看我最初的解析器（在添加更新的解析方法之後），我稍微更改了json數據並添加了我不想出現在圖表中的額外數據（任何數據不在你以前的json版本中）。爲了更清楚一點，是否有可能只從json文件中提取特定的數據到圖表中，同時傳遞我們不想在圖表中顯示的不需要的數據？感謝您的時間！ – Luka

創建從數據在本地（對象）JSON文件餡餅highchart

回答

相關問題