Я пытаюсь создать диаграмму aa с помощью угловой директивы NVD3 отсюда: http://krispo.github.io/angular-nvd3/#/
Диаграмма, которую я использую, такова: http://krispo.github.io/angular-nvd3/#/discreteBarChart
Это мой html для создания диаграммы на странице (контекст не кажется важным в этом сценарии):
<nvd3 options="options"
data="top10bar"
ng-mouseenter="mouseEnterEvent($event)"></nvd3>
Это код контроллера (внутри которого находится тег)
app.controller('BarChartController', function ($ scope) {
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 350,
margin: {
top: 20,
right: 20,
bottom: 60,
left: 55
},
width: 500,
x: function (d) {
return d.label;
},
y: function (d) {
return d.value;
},
showValues: true,
transitionDuration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: 30
},
tooltips: false,
discretebar: {
rectClass: ['discreteBar', 'tableRow']
},
interactive: true
}
};
$scope.mouseEnterEvent = function (event) {
console.log("EVENT!");
console.log(event);
};
$scope.$on('elementMouseover.tooltip', function (event, data) {
console.log("In scope.on");
console.log(event);
console.log(data);
console.log("end");
});
$scope.$on('tooltipShow.directive', function (angularEvent, event) {
angularEvent.targetScope.$parent.event = event;
angularEvent.targetScope.$parent.$digest();
});
Из трех обработчиков событий, которые вы видите внизу контроллера, работает только первый, потому что у меня есть опция ng-mouseenter, указанная в nvd3. Однако это работает, когда мышь входит во весь диаграмм div. Я хочу, чтобы наведите мышь на отдельную панель, чтобы я мог выделить ее, а затем выделить другую часть моего представления.
Как вы собираетесь делать то, что я пытаюсь достичь здесь? Любая помощь очень ценится, ура!
У меня была такая же проблема, чтобы обнаружить событие на панели, на которой я написал следующее.
$scope.mouseEnterEvent = function (event) {
if (event.target.localName === 'rect') {
/// Do your operation here.
}
};
Это сработало для меня. Надеюсь, это поможет вам, дайте мне знать, если вы найдете лучший способ передать событие, чтобы составить диаграмму.