如何在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图中的轴上应用点击事件的主要内容,如果未能解决你的问题,请参考以下文章

在 Dojo CheckBox 中手动触发点击事件

用于修改 dojo 网格中的下拉值的 rowclick 事件

使用dojo在饼图上单击事件

dojo - 模板中的单击事件不起作用

如何在Android应用里屏蔽鼠标点击事件

UISwitch 的 UICollectionview 点击事件