如何在dojo图中的轴上应用点击事件
Posted
技术标签:
【中文标题】如何在dojo图中的轴上应用点击事件【英文标题】：how to apply click events on axis in dojo graph 【发布时间】：2013-12-03 11:56:53 【问题描述】：我想在道场图的轴上应用点击事件。可以在轴上写点击事件吗？我在谷歌中搜索了我没有找到的示例代码。有知道的请告诉我。
【问题讨论】：
Dojo 图表是指Dojo 图表包吗？您希望产生的效果是什么？点击图表的轴是什么“意思”？不幸的是，我没有任何权威的答案给你，但我的假设是你可能会检测到轴上的点击，但你不知道轴上的哪个元素......这足够好吗？ 我想更改图表。例如，我想更改特定条形图中的值，然后单击相应的轴并在图表中进行更改 很遗憾，我还是不明白。我正在想象一个带有值的条形图。我在想象一个 X 轴和一个 Y 轴。传统上，图表显示数据的一组值。但是，图表不是“交互式”的，因为您可以更改图表上的值。可以单击一个栏并被告知单击了一个栏...这是您的想法吗？ sirisha 这里是你想要的，点击事件或 X、Y 数据轴上的任何其他操作后条列上的动画。？？ 【参考方案1】：如果你想在onClick事件后对各个数据的bar列进行操作，解决方案代码如下：
<html>
<head>
<script>
dojo.require("dojox.charting.action2d.Tooltip");
dojo.xhrPost(
url : "any URL or for fatching data", // only if you wants Dynamic data
handleAs : "json", // Dynamic data Pattern
load : function(response, ioargs)
require([
"dojox/charting/Chart",
"dojox/charting/themes/Claro",
"dojox/charting/plot2d/Columns",
"dojox/charting/action2d/Highlight",
"dojox/charting/plot2d/Markers",
"dojox/charting/axis2d/Default",
"dojo/domReady!" ],
function(Chart, theme, ColumnsPlot, Highlight, Tooltip)
var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
var chart = new Chart("chartNode",
title: "Chart Title",
titlePos: "bottom",
titleGap: 25,
titleFont: "normal normal normal 15pt Arial",
titleFontColor: "orange"
);
chart.setTheme(theme);
chart.addPlot("default",
type: ColumnsPlot,
markers: true,
gap: 8
);
chart.addAxis("x",labels: response.data, font: "normal normal bold 11pt Tahoma",rotation:-20);
chart.addAxis("y", vertical: true, fixLower: "major", fixUpper: "major" );
chart.addSeries("Students record",chartData);
new dojox.charting.action2d.Highlight(chart,"default");
new dojox.charting.action2d.Tooltip(chart,
"default",
text : function(point)
console.debug(point);
// return "This is " + point.y " " +point.x;
return"This is " + point.y;
);
chart.render();
chart.connectToPlot("default", function(evt)
console.warn(evt.type, " on element ", evt.element,
" with shape ", evt.shape);
console.info("Chart event on default plot!", evt);
console.info("Event type is: ", evt.type);
console.info("The element clicked was: ", evt.element);
var shape = evt.shape, type = evt.type;
// React to click event
if (type == "onclick")
alert("onClick event...........");
new dojox.gfx.fx.animateTransform(
duration : 1200,
shape : shape,
transform : [
name : "rotategAt",
start : [ 0, 240, 240 ],
end : [ 360, 240, 240 ]
]
).play();
console.log("after rotateFx............");
// If it's a mouseover event
else if (type == "onmouseover")
// Store the original color
if (!shape.originalFill)
shape.originalFill = shape.fillStyle;
// Set the fill color to pink
`enter code here`shape.setFill("pink`enter code here`");
// If it's a mouseout event
else if (type == "onmouseout")
// Set the fill the original fill
shape.setFill(shape.originalFill);
);
);
,
error : function(response, ioargs)
//underlay.hide();
console.log("Inside Handle Error");
);
</script>
</head>
<body>
<div style="width: 700px;height: 600">
<fieldset>
<div id="chartNode" style="width: 700px; height: 500px;">BAR Chart.</div>
</fieldset>
</div>
</body>
</html>
这里是单击柱状列后的 onClick 事件。首先它将显示一条消息，然后向左旋转。
【讨论】：
感谢您的回答。我想获取单击它的轴的位置。我想更新点击它的图表。 您的意思是点击事件发生点的坐标。是吗？以上是关于如何在dojo图中的轴上应用点击事件的主要内容，如果未能解决你的问题，请参考以下文章