个人中心
gpt4 book ai didi

html - 如何将 REST 响应放回 angular JS 标签中以绘制 D3 js 饼图

转载 作者：行者123 更新时间：2023-12-04 16:12:52 27 4
gpt4 key购买 nike

我这周开始学习 Angular Js 和 D3 Js。下面的代码可能很可悲，但请耐心等待。

问题:我正在尝试使用返回 json {"chatjson":"[10,20,30]"} 的 REST 服务。
我想使用从 REST 收到的 [10,20,30] 绘制饼图。

代码概览:我在 ng-controller 'validateCtrl' 中使用了三个 REST 服务。两个服务运行良好并以 Angular 显示所需的数据，但来自第三个 REST(参见函数 '$scope.getChartData' )返回 {"chatjson":"[10,20,30]"} ，这是 JSON ，它应该显示基于响应的饼图
Angular 代码中的 donut chart 标签，我没有得到。
D3 Js 代码写在底部。 D3 代码适用于硬编码数据。

实码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>



<body>
<h2>Angular Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>country:<br>
<input type="text" name="country" ng-model="country" required>
<span style="color:red" ng-show="myForm.country.$dirty && myForm.country.$invalid">
<span ng-show="myForm.country.$error.required">country is required.</span>

</span>
</p>

<p>
<input type="submit" value="save" ng-click="send()"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.country.$dirty && myForm.country.$invalid">
</p>

<ul>
  <li ng-repeat="y in detail">
    {{ y.name + ', ' + y.country }}
  </li>
</ul>

<input type="submit" value="Get Country List" ng-click="getData()">
<input type="submit" value="Get Pie Chart" ng-click="getChartData()">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

<div>
<donut-chart data="chartData"></donut-chart>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope,$http) {



    $scope.chartData=[12,13,60]; // Hard coded for testing purpose
    $scope.user = 'Anukul';
    $scope.country = 'India';
//=============== REST  for fetching data from DB for Table details ==============
    $scope.getData = function(){
    var getApi="http://localhost:9080/nextapp/person/getList";

    $http.get(getApi).success(function(response){$scope.names=response.records;
    });
    };
//=============== REST  for fetching data for drawing chart ==============
    $scope.getChartData = function(){
    var getchartApi="http://localhost:9080/nextapp/person/getChart";

    $http.get(getchartApi).success(function(response){$scope.chartData=response;
    });
    };
//=============== REST for inserting data in DB ==============
    $scope.send = function(){
    var name = $scope.user;
    var country = $scope.country;
    var api="http://localhost:9080/nextapp/person/"+name+"/"+country;
    $http.get(api)
    .success(function(response) {$scope.detail = response.result;});
};
//========== End of REST  ==============================
});


//===================== new add for D3 Pie chart ============

    app.directive('donutChart',function(){
    function link(scope,el){
    //---- D3 code goes here
    var data = scope.data;
    var color = d3.scale.category10()
    var el = el[0]
    var width = 500
    var height = 500
    var min = Math.min(width,height)


    var pie = d3.layout.pie().sort(null)
    var arc = d3.svg.arc()
                .outerRadius(125)
                .innerRadius(75)

    var group = d3.select(el).append('svg')
        .attr({width:width,height:height})
        .append('g')
            .attr('transform','translate('+width/2+','+height/2+')')

    var arcs = group.selectAll(".arc")
                .data(pie(data))
                .enter()
                .append('g')
                .attr("class","arc")
    arcs.append("path")
        .attr("d",arc)
        .attr("fill",function(d){return color(d.data);});

    arcs.append("text")
        .attr("transform",function(d){return "translate (" + arc.centroid(d)+")";})
        .text(function(d){return d.data;});



    //d3.select(el[0]).append('svg')
    }

    return{
    link: link,
    restrict:'E',
    scope:{data:'='}
    }
    }
    )




</script>

</body>
</html>

最佳答案

我认为主要问题是指令只运行一次它们的链接功能。您问题中发布的代码执行链接函数中的所有绘图，该函数只能访问初始硬编码数据。

那么，解决方案是以一种可以从观察者调用的形式将绘图代码与链接函数分开:

app.directive('donutChart',function(){
    function link(scope,element){
      scope.el = element[0]; // Cache a reference to the element
      draw(scope.data, scope.el); // Initial draw
    }

    function draw(data, el) {
      var color = d3.scale.category10(),
          width = 500,
          height = 500,
          min = Math.min(width,height),


          pie = d3.layout.pie().sort(null),
          arc = d3.svg.arc()
                  .outerRadius(125)
                  .innerRadius(75);

      d3.select("svg").remove(); // Clear old pie chart

      var group = d3.select(el).append('svg')
            .attr({width:width,height:height})
            .append('g')
            .attr('transform','translate('+width/2+','+height/2+')'),

          arcs = group.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append('g')
            .attr("class","arc");

      arcs.append("path")
          .attr("d",arc)
          .attr("fill",function(d){return color(d.data);});

      arcs.append("text")
          .attr("transform",function(d){return "translate (" + arc.centroid(d)+")";})
          .text(function(d){return d.data;});
    }

    return{
      link: link,
      restrict:'E',
      scope:{data:'='},
      // Add a controller here to $watch for data changes
      controller: function($scope) {
        $scope.$watch('data', function(newData) {
          draw(newData, $scope.el); // Re-draw the chart
        });
      }
    };
  });

我注意到的另一件事可能不是实际问题，因为它取决于实际的服务器响应。设置图表数据时，请执行以下操作: 
$scope.chartData = response;

但是，根据您问题的文本，预期的响应如下: 
{ "chartjson": [10, 20, 30] }

如果是这种情况，并且您的测试图表数据只是一个数组，如下所示: 
$scope.chartData = [12, 13, 60];

然后我希望从这样的响应中获取数组: 
$scope.chartData = response.chartjson;

你可以看到 in this plunker我 mock 的 $httpBackend从您的问题中返回示例对象，这似乎有效。

关于html - 如何将 REST 响应放回 angular JS 标签中以绘制 D3 js 饼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29484619/

27 4 0
文章推荐： d3.js - 如何自定义 D3 折线图中的色阶？
文章推荐： excel - 圆环图的条件格式
文章推荐： charts - 如何更改系列的宽度？
文章推荐： javascript - d3 圆环图与可拖动的外径
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com