我正在使用 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;
};
这是输出:
控制台也没有报错。
最佳答案
您的问题解决方案非常简单。
您使用“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获取更多信息。 希望这会对您有所帮助。
关于javascript - 如何动态绑定(bind) Angular 图表的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27792091/