使用angularjs

时间:2015-10-09 06:06:31

标签: jquery angularjs charts morris.js

我正在使用Morris条形图。它工作得很好,但我想在点击相应的栏上显示表格。这是我的图表 - enter image description here

当我点击绿色条时,我想显示Fullfield表。其他酒吧也一样。我试过了 -

$( "#morrisBars svg text rect" ).click(function() {
  alert( "Handler for .click() called." );
});

这是我的HTML代码 -

<div class="panel-body">
    <div id="bar-example" morris-bar="" morris-data="chartdata_last7Day" morris-options="barOptions_last7Day"></div>
</div>

这是我的JS代码 -

$scope.chartdata_last7Day = [
  { y: "Week 1", ful: "41%", can: "4%",  mis: "0%", res: "0%", wal: "54%"},
  { y: "Week 2", ful: "43%", can: "4%",  mis: "0%", res: "2%", wal: "50%"},
  { y: "Week 3", ful: "52%", can: "9%",  mis: "3%", res: "5%", wal: "31%"},
  { y: "Week 4", ful: "60%", can: "5%",  mis: "1%", res: "1%", wal: "32%"},
  { y: "Week 5", ful: "68%", can: "14%",  mis: "2%", res: "3%", wal: "14%"}
];
$scope.barOptions_last7Day = {
    element: 'bar-example',
    xkey: 'y',
    ykeys: ["ful", "can", "mis", "res", "wal"],
    labels: ["Fulfilled", "Cancelled", "Missed", "Rescheduled", "Walk-in"],
    xLabelMargin: 2,
    barColors: ["#4acab4", "#b2d767", "#ffea88", "#878bb6", "#ff8153"],
    resize: true
};

$( "#bar-example svg rect" ).on('click', function() {
  alert( "Handler for .on() called." );
});

但它没有用。任何人都知道如何在Morris栏上添加点击事件? 请分享你的ans。在此先感谢..

1 个答案:

答案 0 :(得分:0)

float: left元素阻碍了。
text

http://jsbin.com/telupe/edit?html,js,output