Question

我想在dojo图的轴上应用点击事件。可以在轴上写点击事件吗？我在谷歌搜索了我没有找到的示例代码。任何人都知道请我。

Answer 1

如果您希望在onClick事件后对条形列操作各个数据，则解决方案代码如下：

<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图中的轴上应用单击事件

1 个答案: