Javascript C3图表在角度指令中调整大小
我现在有一个简单的甜甜圈图表,是我用C3创建的。我已经把它放在指令里了,一切都很好 我的指示如下:Javascript C3图表在角度指令中调整大小,javascript,angularjs,c3.js,Javascript,Angularjs,C3.js,我现在有一个简单的甜甜圈图表,是我用C3创建的。我已经把它放在指令里了,一切都很好 我的指示如下: angular.module('dashboardApp').directive('donutChart',function(){ function link(scope,element,attr){ scope.$watch(function() { return scope.data; },
angular.module('dashboardApp').directive('donutChart',function(){
function link(scope,element,attr){
scope.$watch(function() {
return scope.data;
},
function() {
if(scope.data !== undefined){
var chart = c3.generate({
bindto: 'donut-chart',
data:{
columns : scope.data,
type: 'donut'
},
donut:{
label : {
format: function(value,ratio,id){
return value;
},
}
},
tooltip:{
position: function(data,width,height,element){
return {top:-180,left:300}
}
},
});
}
}
)};
return {
restrict: 'EA',
scope: {
data: '='
},
link : link
};
});
在HTML中,我有以下内容:
<div class="row">
<div class="donut-route" >
<donut-chart data='routes'></donut-chart>
</div>
</div>
我的目标是让甜甜圈字符在它当前所在的div中重新调整大小
我知道C3 resize可以在其中传递值,也许我可以将窗口大小添加到$范围中。每次查看并调整大小,但我不确定这是否太重。通过阅读文档,我认为C3图会自动重新调整大小,但由于它在指令中,我认为它受到了限制
如果您有任何建议,我将不胜感激。为了调查问题,我将您的代码放入了一个工作区 由于生成的图表是一个SVG对象,因此CSS自动调整图表大小的方法很棘手。不过,我的建议是浏览以下帖子: 还是这个问题 因此,我认为更有效的方法(如您所述)是在generate上使用size选项:
var chart = c3.generate({
size: {
height: 200,
width: 200
}...
并调整C3 API的大小以更新大小:
chart.resize({height:100, width:300})
谢谢你的建议。我在想,我将不得不沿着观察路线走,但看到其他的选择是很好的。