我有两个模型: iposectors 和 ipomarketcap ,工厂,根据参数创建模型实例,< strong> BindingCode 将所有绑定在一起。 这些模型具有用于测试的硬编码数据,但计划从API检索数据。 这是小提琴:highcharts。
什么都没有出现...... 在调试器行上 - 我可以看到创建了高图对象,并且附加了所有数据,但只显示默认标题。 我错过了什么?
var myapp = angular.module('myApp', ["highcharts-ng"]);
myapp.controller('myctrl', BindingCode);
myapp.factory("Factory", Factory);
function iposectors() {
this.charttitle = "Sector Distribution";
this.apidata = [
['APP Android', 45.0],
['APP Ios', 26.8],
['Widget Web', 12.8],
['MTC BAckoffice', 8.5],
['Correo electrónico', 6.2],
['Facebook', 6.2],
['Twitter', 6.2],
['Teléfono', 6.2],
['Presencial', 6.2],
];
this.chartConfig = {
options: {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
height: 135,
width: 160,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function () {
return '<div style="text-align: left; width:120px;float:left;">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
itemStyle: {
color: '#421C40',
fontWeight: 'bold',
fontFamily: 'Century Gothic',
fontSize: '10px'
}
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> Weight: <b>{point.percentage:.1f}%</b>'
},
},
title: {
text: this.charttitle,
align: 'center',
verticalAlign: 'top'
},
series: [{
name: 'Weight',
size: '75%',
showInLegend: true,
data: this.apidata
}],
loading: false
}
}
function ipomarketcap() {
this.charttitle = "Market Cap Distribution";
this.apidata = [
['MC APP Android', 45.0],
['MC APP Ios', 26.8],
['MC Widget Web', 12.8],
['MC MTC BAckoffice', 8.5],
['MC Correo electrónico', 6.2],
['MC Facebook', 6.2],
['MC Twitter', 6.2],
['MC Teléfono', 6.2],
['MC Presencial', 6.2],
];
this.chartConfig = {
options: {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
height: 135,
width: 160,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function () {
return '<div style="text-align: left; width:120px;float:left;">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
itemStyle: {
color: '#421C40',
fontWeight: 'bold',
fontFamily: 'Century Gothic',
fontSize: '10px'
}
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> Weight: <b>{point.percentage:.1f}%</b>'
},
},
title: {
text: this.charttitle,
align: 'center',
verticalAlign: 'top'
},
series: [{
name: 'Weight',
size: '75%',
showInLegend: true,
data: this.apidata
}],
loading: false
}
}
function BindingCode($scope, Factory) {
$scope.iposectors = Factory.CreatePieChart('iposectors');
debugger;
}
function Factory() {
return {
CreatePieChart: function (type) {
if (type == 'iposectors') {
return new iposectors();
}
else {
return new ipomarketcap();
}
}
}
}
html页面
<div ng-app="myApp">
<div ng-controller="myctrl">
@*<highchart id="chart1" config="highchartsNG"></highchart>*@
<highchart id="chart1" config="chartConfig" class="span9"></highchart>
</div>
</div>
答案 0 :(得分:1)
问题是您的数据绑定到iposectors
属性,而highcharts-ng期望在$scope
变量中绑定。例如,您可以通过以下方式绑定此引用:
function BindingCode($scope, Factory) {
$scope.iposectors = Factory.CreatePieChart('iposectors');
$scope.chartConfig = $scope.iposectors.chartConfig;
}