与教程中的代码几乎相同。以下是HTML：
<div fusioncharts
width="300"
height="100"
type="column2d"
dataSource="{{myDataSource}}" >
</div>
<div fusioncharts
width="300"
height="100"
type="column2d"
dataSource="{{myDataSource2}}" >
</div>
这是我的AngularJS代码：
$scope.myDataSource = {
chart: {
caption: weekObject.week
},
data: [
{
label: "Saturday",
value: weekObject.days[0]._FE_Items_Sold.toString()
},
{
label: "Sunday",
value: weekObject.days[1]._FE_Items_Sold.toString()
},
{
label: "Monday",
value: weekObject.days[2]._FE_Items_Sold.toString()
},
{
label: "Tuesday",
value: weekObject.days[3]._FE_Items_Sold.toString()
},
{
label: "Wednesday",
value: weekObject.days[4]._FE_Items_Sold.toString()
},
{
label: "Thursday",
value: weekObject.days[5]._FE_Items_Sold.toString()
},
{
label: "Friday",
value: weekObject.days[6]._FE_Items_Sold.toString()
}
]
};
$scope.myDataSource2 = {
chart: {
caption: weekObject.week
},
data: [
{
label: "Saturday",
value: weekObject.days[0]._FE_Transactions.toString()
},
{
label: "Sunday",
value: weekObject.days[1]._FE_Transactions.toString()
},
{
label: "Monday",
value: weekObject.days[2]._FE_Transactions.toString()
},
{
label: "Tuesday",
value: weekObject.days[3]._FE_Transactions.toString()
},
{
label: "Wednesday",
value: weekObject.days[4]._FE_Transactions.toString()
},
{
label: "Thursday",
value: weekObject.days[5]._FE_Transactions.toString()
},
{
label: "Friday",
value: weekObject.days[6]._FE_Transactions.toString()
}
]
};
当我运行这个时，我得到了第一个要渲染的图表。第二个图只有一个短语“没有要显示的数据”，我注意到即使是第一个图，如果我给数据源命名除了“myDataSource”之外的任何东西，它也不会呈现。这让我很困惑，因为如果我不能引用多个数据变量来绑定，我怎么可能拥有一个包含多个图形的页面？我觉得解决我的无知比解决我的代码类型问题更重要，但是。。
问题：如何使用不同数据的FushionCharts呈现多个图形？
最佳答案
对我来说有用。
var app = angular.module('dashApp', ["ng-fusioncharts"]);
app.controller('fusionController', ["$scope", function ($scope) {
$scope.myDataSource1 = {
chart: {caption: "Some week"},
data: [
{label: "Saturday", value: "100"},
{label: "Sunday", value: "300"},
{label: "Monday", value: "150"},
{label: "Tuesday", value: "240"},
{label: "Wednesday", value: "300"},
{label: "Thursday", value: "90"},
{label: "Friday", value: "170"}
]
};
$scope.myDataSource2 = {
chart: {
caption: "Some other week"
},
data: [
{label: "Saturday", value: "1100"},
{label: "Sunday", value: "1300"},
{label: "Monday", value: "1150"},
{label: "Tuesday", value: "1240"},
{label: "Wednesday", value: "1300"},
{label: "Thursday", value: "190"},
{label: "Friday", value: "1170"}
]
};
}]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<body ng-app="dashApp">
<div class="modal-body" ng-controller="fusionController">
<div fusioncharts
width="600"
height="300"
type="column2d"
dataSource="{{myDataSource1}}" >
</div>
<div fusioncharts
width="600"
height="300"
type="column2d"
dataSource="{{myDataSource2}}" >
</div>
</div>
</body>它不适用于任何特定场景吗？