我正在尝试制作一个饼图指令,并且使用 highcharts,但我还想添加另一行文本,例如“60%”左右。到目前为止我尝试过这个
app.directive('pieGraph', function($compile) {
return {
restrict: 'C',
scope: {
value: '@',
color: '@'
},
link: function(scope, elem) {
elem.highcharts({
chart: {
type: 'pie',
backgroundColor: null
},
title: {
text: null
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: true
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
name: '',
data: [
{
name: 'a',
y: parseInt(scope.value, 10),
color: scope.color
},
{
name: 'b',
y: (100 - parseInt(scope.value, 10)),
color: '#ffffff'
}
],
size: '100%',
innerSize: '90%',
dataLabels: {
enabled: false
}
}]
});
var graph = angular.element('<span class="pie-graph-value">{{scope.value}}<sup>%</sup></span>');
$compile(graph)(scope);
elem.append(graph);
}
};
});
但这个问题是我应用的最后一个,仅表示%而不是值和百分比符号。我最后的编译有什么问题吗?
预先感谢您,丹尼尔!
最佳答案
使用{{value}}
或将您的元素写为 '<span class="pie-graph-value">' + scope.value + '<sup>%</sup></span>'
(请注意,后者稍后不会更新,因为该值仅在附加元素时计算一次)。
该元素将被渲染,因此对 scope
的引用是隐式的。
关于javascript - 在指令内附加 html 和范围值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26162826/