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移动饼图块并放大略微放大图标记。当用户将鼠标放在特定的饼上时，出现Tooltip，其中使用var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];定义的数据。但在这里我想用TooltipDialog而不是Tooltip。所以当用户把鼠标放在特定的饼图上时，应该弹出TooltipDialog。

以下是创建TooltipDialog的代码。但我无法使用它与饼图。如何使用TooltipDialog与饼图？

来源

2015-01-12 Anil Bhatiya

一个不是那么简单的解决方案可能是复制dojox/charting/action2d/Tooltip代码，并通过副本中的dijit/TooltipDialog替换dijit/Tooltip的任何实例？然后使用修改后的操作就像使用常规操作一样？

来源

2015-01-13 09:41:40 Christophe

dijit.TooltipDialog与饼图

回答

相关问题