javascript - 如何动态绑定(bind) Angular 图表的数据

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”指令获取的文件内容，它以字符串格式返回文件内容。anguar-charts 数据属性应始终采用 JSON 格式只有你需要做 JSON.parse() recieved $fileContent to JSON。

代码

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

我为测试创建了一个test.txt文件，并在里面写了下面的代码。

测试.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获取更多信息。希望这会对您有所帮助。