如何在dojo图中的轴上应用点击事件答案

【问题标题】：how to apply click events on axis in dojo graph如何在dojo图中的轴上应用点击事件
【发布时间】：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 事件。首先它将显示一条消息，然后向左旋转。

【讨论】：

感谢您的回答。我想获取单击它的轴的位置。我想更新点击它的图表。
您的意思是点击事件发生点的坐标。是吗？