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

Question

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

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/

Answer 1

除了必须将鼠标悬停在线条上的确切标记上的工具提示之外，您还可以使用鼠标指示器，这非常漂亮。您可以在这里看到它的实际效果:

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 功能并引用图表上当前选择的任何值。