如何在鼠标悬停时更改离散条颜色 - angular-nvd3
how to change descrete bar color onmouseover - angular-nvd3
我想创建一个图表,用于查看与日期。所以我使用了 angular-nvd3 插件。图表显示正常。我对所有离散条形元素使用相同的颜色。我需要在 moseover 事件中更改特定栏的颜色。我尝试了以下方法。
(1) d3.select(this).atrr('rect').style('fill':'red');
(2) $scope.options.chart[e.index].color = "#222";
但没有一个在工作。有什么办法吗
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
x: function(d){return d.label;},
y: function(d){return d.value;},
showValues: false,
transitionDuration: 500,
xAxis: {
axisLabel: 'Month'
},
yAxis: {
axisLabel: 'Views',
axisLabelDistance: 10,
tickFormat: function (d) {
return d3.format('k')(d);
}
},
color: ['#59ade8'],
dispatch: {
tooltipShow: function(e){ },
tooltipHide: function(e){},
beforeUpdate: function(e){}
},
discretebar: {
dispatch: {
//chartClick: function(e) {console.log("! chart Click !")},
elementClick: function(e) {
selected_element = e;
setVisibility();
},
elementMouseout: function(e) {},
elementMouseover: function(e) {
d3.select(e).color = '#222'
}
}
}
}
}
$scope.data = [{
values: [{
"label" : "10" ,
"value" : 50
},{
"label" : "11" ,
"value" : 20
},{
"label" : "13" ,
"value" : 60
},{
"label" : "14" ,
"value" : 90
},{
"label" : "15" ,
"value" : 40
},{
"label" : "16" ,
"value" : 50
},{
"label" : "17" ,
"value" : 30
}]
}];
我使用 $scope.apply() 函数解决了这个问题。这让我很高兴。我将每个条形颜色更改
$scope.$apply(function(){
$scope.data[0].values[e.index].color = '#59ade8';
});
我想创建一个图表,用于查看与日期。所以我使用了 angular-nvd3 插件。图表显示正常。我对所有离散条形元素使用相同的颜色。我需要在 moseover 事件中更改特定栏的颜色。我尝试了以下方法。
(1) d3.select(this).atrr('rect').style('fill':'red');
(2) $scope.options.chart[e.index].color = "#222";
但没有一个在工作。有什么办法吗
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
x: function(d){return d.label;},
y: function(d){return d.value;},
showValues: false,
transitionDuration: 500,
xAxis: {
axisLabel: 'Month'
},
yAxis: {
axisLabel: 'Views',
axisLabelDistance: 10,
tickFormat: function (d) {
return d3.format('k')(d);
}
},
color: ['#59ade8'],
dispatch: {
tooltipShow: function(e){ },
tooltipHide: function(e){},
beforeUpdate: function(e){}
},
discretebar: {
dispatch: {
//chartClick: function(e) {console.log("! chart Click !")},
elementClick: function(e) {
selected_element = e;
setVisibility();
},
elementMouseout: function(e) {},
elementMouseover: function(e) {
d3.select(e).color = '#222'
}
}
}
}
}
$scope.data = [{
values: [{
"label" : "10" ,
"value" : 50
},{
"label" : "11" ,
"value" : 20
},{
"label" : "13" ,
"value" : 60
},{
"label" : "14" ,
"value" : 90
},{
"label" : "15" ,
"value" : 40
},{
"label" : "16" ,
"value" : 50
},{
"label" : "17" ,
"value" : 30
}]
}];
我使用 $scope.apply() 函数解决了这个问题。这让我很高兴。我将每个条形颜色更改
$scope.$apply(function(){
$scope.data[0].values[e.index].color = '#59ade8';
});