我实现了morris图,并且还在处理点击功能,但是当我点击栏时我想要那个栏的数据会提醒。那么如何获取数据。
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Bar Chart Example</title>
</head>
<body>
<div id="bar-example"></div>
</body>
<script>
Morris.Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
$( "#bar-example svg rect" ).on('click', function(data) {
alert( data);//show [object.Object] when alert popup
});
</script>
</html>
答案 0 :(得分:2)
首先,谢谢你让我发现this cool graph library。 ;)
这是编辑
经过几次尝试......
我最终真正简化了我的解决方案
为清楚起见,我删除了之前的所有编辑。无论如何,您可以在编辑历史中看到它们。 ;)
现在,根据以下评论中的new example provided:
我们在图表下方的摘要中获得了所需的信息:
var thisDate,thisData;
$( "#bar-example svg rect" ).on('click', function() {
// Find data and date in the actual morris diply below the graph.
thisDate = $(".morris-hover-row-label").html();
thisDataHtml = $(".morris-hover-point").html().split(":");
thisData = thisDataHtml[1].trim();
// alert !!
alert( "Data: "+thisData+"\nDate: "+thisDate );
});
thisDate
和thisData
不保留(空)onload
但是它们会在点击时保留最后点击的条形值
这些变量可以在其他后续脚本中使用,因为在click()
处理程序之外声明。
答案 1 :(得分:0)
我对以下javascript函数并不感到自豪,但是为了检索我们刚刚点击的矩形的索引,我成功地使用了它。 然后我调用C#方法来检索值。
$('#m_Top10Applications svg rect').on('click', function (event) { window.location.replace("MyPage.aspx?Top10Index=" + GetMorrisBarClickedBarIndex($this));});
function GetMorrisBarClickedBarIndex(par$ThisRect)
{
var xRect = par$ThisRect[0].x.baseVal.value;
var TheParent = par$ThisRect.parent();
var Rectangles = TheParent.find("rect");
var Rect0 = Rectangles[0];
var Rect1 = Rectangles[1];
var X0 = Rect0.x.baseVal.value;
var X1 = Rect1.x.baseVal.value;
var RectWidth = X1 - X0;
var xPos = xRect - X0;
var Index = Math.floor(xPos / RectWidth, 0);
return Index;
}
答案 2 :(得分:0)
“ rect”元素不在我的线图中,因此我将其删除。非常感谢,它给了我所需的一切。
var thisDate,thisData;
$( "#morrisLine svg" ).on('click', function() {
// Find data and date in the actual morris diply below the graph.
thisDate = $(".morris-hover-row-label").html();
thisDataHtml = $(".morris-hover-point").html().split(":");
thisData = thisDataHtml[1].trim();
// alert !!
alert( "Data: "+thisData+"\nDate: "+thisDate );
});
答案 3 :(得分:0)
以上示例是折线图,而不是具有多个不同颜色的条形图的条形图。
如果您的莫里斯图表中有三个柱形,基于下面的解决方案是我的代码:
$('#bar-sixmonthstats svg rect').on('click', function () {
_$month = $('.morris-hover-row-label').text();
//debugger;
barColor = $(this).attr('fill');
var barType = '';
switch (barColor) {
case '#64a900': barType = 'PO'; break;
case '#7acc00': barType = 'SO'; break;
case '#4d8000': barType = 'WO'; break;
}
console.log("Order Type : " + barType + "\nDate : " + _$month);
});