Question

这里我用MoveSlice创建了饼图。下面是代码。

<!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的代码。但是我无法将它与饼图一起使用。

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？

Answer 1

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

带有饼图的dijit.TooltipDialog

1 个答案: