javascript - 在dojox.charting.Chart中的鼠标悬停时显示点值

关于道场图表，我有两个问题。

1）如何在鼠标悬停在dojo图表中显示点值？下面是我使用YUI库开发的图表。您可以看到当我将鼠标悬停在某个点上时，它会在该点显示系列名称及其值。在这种情况下，这是海关关税和费用[值：30,546]。我的问题是如何在dojo图表中实现此功能？



2）有什么方法可以将屏幕上显示的图表导出到图像文件（png或gif）？在Yui中，我们可以右键单击图表并将其导出为png。

我正在使用Dojo版本1.8.3

您可以查看以下代码，以查看如何创建图表：

require(["dojo/ready", "dojox/charting/Chart2D","dojox/charting/themes/Claro"],                  function(ready, Chart,ClaroTheme) {
    ready(function() {
        var mychart = Chart("mychart");

        mychart.title = "My Chart";
        mychart.titleFont = "tahoma";
        mychart.addPlot("line_plot", {
            type: "Lines",
            lines: true,
            areas: false,
            markers: true
        });

        mychart.addPlot("column_plot", {
            type: "Columns",
            lines: true,
            areas: false,
            markers: true
        });

        mychart.addAxis("x", {
            vertical: false
        });

        mychart.addAxis("y", {
            vertical: true
        });

        mychart.addSeries("line_series", [1, 3, 5, 2, 6, 1, 0, 4, 6, 4, 1], {
            plot: "line_plot"
        });

        mychart.addSeries("column_series", [1, 3, 5, 2, 6, 1, 0, 4, 6, 4, 1], {
            plot: "column_plot"
        });
        mychart.setTheme(ClaroTheme);

        mychart.render();
    });
});

http://jsfiddle.net/5VYhN/

最佳答案

除了必须在鼠标光标悬停在行上的确切标记上的工具提示之外，您还可以使用MouseIndicator，这确实很棒。您可以在此处查看其运行情况：

http://demos.dojotoolkit.org/demos/mobileCharting/demo.html

实现非常简单：

new MouseIndicator(this.twoDimensionChart, "default", {
    series: "Plot",
    mouseOver: true,
    fillFunc: function(v) {
        return "#BFD6EB"
    },
    labelFunc: lang.hitch(this, function(v) {
        this.currentMouseIndicatorValue = v;
        return v.y;
    })
});

请注意，此代码位于我的自定义小部件中。我将mouseOver设置为true，因此您不必像在链接中的dojo示例中那样单击和拖动...如果您将鼠标悬停在上面，就可以得到该值。我将行添加到labelFunc，以将实例变量设置为用于标签的当前值（基本上只包含x和y值）。然后，我为自定义窗口小部件创建了一个onclick事件侦听器，因此我可以进行一些自定义处理，并在有人单击图表上的任何位置时显示带有附加信息的对话框：

this.on("click", lang.hitch(this, function(evt){
    this.popupResultsDialogForItem(this.currentMouseIndicatorValue.x);
}));

显然，这是可选的，但它仅使您能够灵活地添加onclick功能并引用图表上当前选择的任何值。

关于javascript - 在dojox.charting.Chart中的鼠标悬停时显示点值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16386882/