dijit.TooltipDialog с круговой диаграммой

Здесь я создал круговую диаграмму с MoveSlice. Ниже приведен код.dijit.TooltipDialog с круговой диаграммой

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Demo: Monthly Sales Pie Chart with MoveSlice</title> 
     <link rel="stylesheet" href="style.css" media="screen"> 
     <!--link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"--> 
     <link rel="stylesheet" href="pathToDojo/dijit/themes/claro/claro.css" media="screen"> 
    </head> 
    <body class="claro"> 
     <h1>Monthly Sales Pie Chart with MoveSlice</h1> 

     <div id="chartNode" style="width:800px;height:400px;"></div> 

     <!-- load dojo and provide config via data attribute --> 
     <!-- load dojo and provide config via data attribute --> 
     <script src="pathToDojo/dojo/dojo.js"></script> 
     <script> 
     require([ 
      // Require the basic chart class 
      "dojox/charting/Chart", 

      // Require the theme of our choosing 
      "dojox/charting/themes/Claro", 

      // Charting plugins: 

      // We want to plot a Pie chart 
      "dojox/charting/plot2d/Pie", 

      // Retrieve the Legend, Tooltip, and MoveSlice classes 
      "dojox/charting/action2d/Tooltip", 
      "dojox/charting/action2d/MoveSlice", 


      // We want to use Markers 
      "dojox/charting/plot2d/Markers", 

      // We'll use default x/y axes 
      "dojox/charting/axis2d/Default", 

      // Wait until the DOM is ready 
      "dojo/domReady!" 
     ], function(Chart, theme, Pie, Tooltip, MoveSlice) { 

      // Define the data 
      var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099]; 

      // Create the chart within it's "holding" node 
      var chart = new Chart("chartNode"); 

      // Set the theme 
      chart.setTheme(theme); 

      // Add the only/default plot 
      chart.addPlot("default", { 
       type: Pie, 
       markers: true, 
       radius:170 
      }); 

      // Add axes 
      chart.addAxis("x"); 
      chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" }); 

      // Add the series of data 
      chart.addSeries("Monthly Sales - 2010",chartData); 

      // Create the tooltip 
      var tip = new Tooltip(chart,"default"); 

      // Create the slice mover 
      var mag = new MoveSlice(chart,"default"); 

      // Render the chart! 
      chart.render(); 


     }); 
     </script> 
    </body> 
</html>

Здесь MoveSlice перемещает фигуру круговой диаграммы, а Magnify слегка увеличивает маркеры диаграммы. Когда пользователь нажимает на определенный пирог, появляется Tooltip с данными, определенными с помощью var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];. Но здесь я хочу использовать TooltipDialog вместо Tooltip. Таким образом, когда пользователь нажимает на определенный пирог, то должен появиться TooltipDialog.

Ниже приведен код для создания TooltipDialog. Но я не могу использовать его с Pie Chart.

require([ 
    "dijit/TooltipDialog", 
    "dijit/popup", 
    "dojo/on", 
    "dojo/dom", 
    "dojo/domReady!" 
], function(TooltipDialog, popup, on, dom){ 
    var myTooltipDialog = new TooltipDialog({ 
     id: 'myTooltipDialog', 
     style: "width: 300px;", 
     content: "<p>I have a mouse leave event handler that will close the dialog.", 
     onMouseLeave: function(){ 
      popup.close(myTooltipDialog); 
     } 
    }); 

    on(dom.byId('thenode'), 'mouseover', function(){ 
     popup.open({ 
      popup: myTooltipDialog, 
      around: dom.byId('thenode') 
     }); 
    }); 
});

Как я могу использовать TooltipDialog с круговой диаграммой?

источник

2015-01-12 Anil Bhatiya

Не так просто решить, возможно, дублировать dojox/charting/action2d/Код подсказки и заменить любое instanciation dijit/Tooltip на dijit/TooltipDialog в вашей копии? Затем используйте это модифицированное действие так же, как если бы вы использовали обычный?

источник

2015-01-13 09:41:40 Christophe

dijit.TooltipDialog с круговой диаграммой

ответ

Смежные вопросы