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

Question

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

1) 如何在鼠标悬停时在道场图表中显示点值？下面是我使用 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 功能并引用图表上当前选择的任何值。

Answer 2

您可以通过在数据中使用工具提示来自定义鼠标悬停。 例如：

在require语句中，添加“dojox/charting/action2d/Tooltip” 在您的图表数据中添加带有文本的“工具提示”以在鼠标悬停时显示

JSON 图表数据：

var chartdata = [{x: 8,y:"0",tooltip:"What to show during mouse over"}];

在图表数据中使用工具提示的 JS 代码：

// Create the tooltip which will show during mouse over
var tip = new Tooltip(chart,"default");

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

这就是你所需要的......不确定你的第二个问题......

这很简单，请访问此图表示例页面： http://dojotoolkit.org/documentation/tutorials/1.8/charting/

使用您现有的示例，以下是添加鼠标悬停的方法：

require(["dojo/ready", "dojox/charting/Chart2D","dojox/charting/themes/Claro","dojox/charting/action2d/Tooltip",], function(ready, Chart,ClaroTheme,Tooltip) {
    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
        });

        var column_data = [{y:1,x:1,tooltip: "column 1"}, {y: 3,x:2,tooltip: "column 2"}, {y:5,x:3,tooltip: "column 3"}, {y:2,x:4,tooltip: "column 4"}, {y:6,x:5,tooltip: "columnt 5"}, {y:1,x:6,tooltip: "column 6"}, {y:0,x:7,tooltip: "column 7"}, {y:4,x:8,tooltip: "column 8"}, {y:6,x:9,tooltip: "column 9"}, {y:4,x:10,tooltip: "column 10"}, {y:1,x:11,tooltip: "column 11"}];

        var bar_data = [{y:1,x:1,tooltip: "bar 1"}, {y: 3,x:2,tooltip: "bar 2"}, {y:5,x:3,tooltip: "bar 3"}, {y:2,x:4,tooltip: "bar 4"}, {y:6,x:5,tooltip: "bar 5"}, {y:1,x:6,tooltip: "bar 6"}, {y:0,x:7,tooltip: "bar 7"}, {y:4,x:8,tooltip: "bar 8"}, {y:6,x:9,tooltip: "bar 9"}, {y:4,x:10,tooltip: "bar 10"}, {y:1,x:11,tooltip: "bar 11"}];

        mychart.addSeries("line_series", bar_data, {
            plot: "line_plot"
        });

        mychart.addSeries("column_series", column_data, {
            plot: "column_plot"
        });
        mychart.setTheme(ClaroTheme);

        var tip = new Tooltip(mychart,"line_plot");
        var tip1 = new Tooltip(mychart,"column_plot");

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

Answer 3

没有直接支持将图表保存为图像。任何dojox.gfx 表面（包括图表）都可以保存为 JSON 格式或 SVG 格式。可以在dojox/gfx/utils.js 中找到相关工具。如果您的表面是使用 Canvas 渲染器完成的，那么您可以使用普通的非 Dojo 方式将其导出为光栅图像（例如，.png）。我没有检查，但如果用户右键单击画布对象，它可能支持另存为图像。

下面的小备忘单：

如何从图表中获取表面：

var chart = ...;
var surface = chart.surface;

如何从表面获取画布元素：

var canvas = surface.rawNode;

如何从画布创建图像：

var image = new Image();
image.src = canvas.toDataUrl("image/png");

如何将表面转换为 JSON，可以发送到服务器：

var jsonString = dojox.gfx.utils.toJson(surface);

如何将表面转换为 SVG，可以发送到服务器：

var def = dojox.gfx.utils.toSvg(surface); // returns dojo.Deferred
def.then(function(svgText){
  console.log(svgText);
});