如何动态绑定角图的数据

Question

我在我的应用程序中使用angular-charts指令，它在我们最初设置数据时运行良好。但是当我从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>    

以下是我从文件中读取数据的模型

 <div class="col-lg-6 col-md-6">
         <div class="form-group">
               <div  >
              <input type="file" on-read-file="showContent($fileContent)" />
         </div>
  </div>     

App.JS：

  $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;
    };

这是输出：

控制台上也没有错误。

Answer 1

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

使用“on-read-file”指令获取的fileContent，它以字符串格式返回fileContent。 anguar-charts数据属性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]
   }]
 }

您可以参考fiddle link了解详情。 希望这对你很有帮助。

Answer 2

尝试添加$ scope。$ apply（）;在$ scope.widget.data = $ fileContent;

之后