Question

这是我的JSON文件中的JSON数据

{＆＃34;磁盘空间＆＃34;：100，＆＃34; diskspace.free＆＃34; 50＆＃34;时间＆＃34;：8，＆＃34; time.played＆＃34 ;: 2，＆＃34;控制器＆＃34;：25，＆＃34; controllers.used＆＃34;：3，＆＃34; controllers.new＆＃34;：10，＆＃34; controllers.broken＆＃34;：12}

我想要做的是以几种形式的饼图显示上面的Json数据。例如，一个饼图将显示diskpace / diskspace.free，它基本上是50％50的图表。

问题在于，当我的Json文件以所示格式显示时，我无法显示数据。但是，如果我将文件中的json数据更改为col和row格式，我设法找到一种方法来显示它，但这很不方便，因为我需要为每个图表创建一个单独的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，因此请随意调整它，非常感谢您的帮助。

Answer 1

您的格式不是真的..易于解析。我的意思是，在键中，您有不同的名称，这很难定义解析规则。为什么不使用这样的东西：

{
  "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
    }
};

注意：我不确定这些图表应该如何呈现（时间与时间。播放？或时间+时间。播放时间与播放时间？）作为饼图。在我看来，对于您的用例可能是更好的选择：http://plnkr.co/edit/Bydq5NG6BkG2LOqhQwzF?p=preview

从本地（OBJECT）JSON文件中的Data创建饼图高清图

1 个答案: