Javascript 如何动态绑定角度图数据

我在我的应用程序中使用指令，当我们最初设置数据时，它运行良好。但当我从json文件读取数据并将数据分配给图表时，它只生成x轴和y轴，而不生成图例。这是我的代码

HTML:

 <div id="content" ng-controller="MainCtrl1" class="box-content">   
    <div style="position:relative">
     <div  data-ac-chart="'bar'"    data-ac-data="widget.data"  data-ac-config="config"  class="chart"> 
     </div>
  </div>    

  $scope.data = {
     "series": ["Northern", "Western", "Southern", "East", "Center"],
     "data": [ {
      "x": "Mahinda",
      "y": [90, 800, 600,100,900]
    }, {
      "x": "Maithiri",
      "y": [351,439,380,800,300]
    }, {
     "x": "Others",
     "y": [140, 33,230, 879,43]
   }]
 };

这里我将数据分配给小部件

$scope.addBarChart = function() {
  $scope.dashboard.widgets.push({
    name: "General election",
    sizeX: 110,
    sizeY: 50,
    type:"Bar",
    data:$scope.data
  });
};

这很好，这就是输出。

然后我从json文件中读取数据并分配给widget的数据对象

  $scope.showContent = function($fileContent){
        $scope.widget.data = $fileContent;
    };

以下是输出：

---

控制台上也没有错误。

尝试添加$scope。$apply（）；$scope.widget.data=$fileContent之后

您的问题解决方案非常简单

使用“on read file”指令获取的文件内容，它以字符串格式返回文件内容。 anguar图表数据属性shpuld始终为JSON格式 只需执行JSON.parse（）即可将$fileContent接收到JSON

代码

$scope.showContent = function($fileContent) {
    $scope.widget.data = JSON.parse($fileContent);;
};

我为测试创建了一个test.txt文件，并在其中编写了以下代码

test.txt

{
     "series": ["Northern", "Western", "Southern", "East", "Center"],
     "data": [ {
      "x": "Mahinda",
      "y": [90, 800, 600,100,900]
    }, {
      "x": "Maithiri",
      "y": [351,439,380,800,300]
    }, {
     "x": "Others",
     "y": [140, 33,230, 879,43]
   }]
 }

你可以参考更多信息。

---

希望这对您非常有用。

尝试添加if（！$scope.$$phase）$scope.$apply（）；显示ajax代码。它应该使用$http或$resource@pankajparkar不，我只是使用文件选择器从json文件获取数据。你是如何获取数据的？@pankajparkar我修改了这个问题，加入了我读取json文件的代码，它在fiddler中工作，不适用于我的项目。是否需要解析为Json，因为我已经有了Json文件Yes..因为指令正在以字符串格式返回数据。无论如何，您需要解析它以获得实际的JSONin FIDLE我已经使用了$scpe.data，您应该用$scope.widget.data替换它

{
     "series": ["Northern", "Western", "Southern", "East", "Center"],
     "data": [ {
      "x": "Mahinda",
      "y": [90, 800, 600,100,900]
    }, {
      "x": "Maithiri",
      "y": [351,439,380,800,300]
    }, {
     "x": "Others",
     "y": [140, 33,230, 879,43]
   }]
 }