如何动态绑定angular-Charts的数据

Question

我在我的应用程序中使用 angular-charts 指令，当我们设置数据 initially.But 当我从 json 文件读取数据并将数据分配给图表时，它运行良好，它只生成 x 轴和 y 轴但不是 legends.Here 是我的代码，

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 文件中读取数据并分配给小部件的数据对象，

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

这是输出：

控制台也没有错误。

Answer 1

尝试添加 $scope.$apply();在 $scope.widget.data = $fileContent;

之后

Answer 2

你的问题解决方法很简单。

您使用 "on-read-file" 指令获取的文件内容，它 returns 字符串格式的文件内容。 anguar-charts 数据属性应该始终采用 JSON 格式只有你需要做 JSON.parse() received $fileContent to 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了解更多信息。希望对您有所帮助。

如何动态绑定angular-Charts的数据

How to Bind Data Of angular-Charts Dynamically

javascript

charts

json

angularjs

angularjs-controller