0

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

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/

4

3 回答 3

2

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

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

于 2014-04-29T17:51:54.343 回答
1

There is no direct support to save a chart as an image. Any dojox.gfx surface (including a chart) can be saved in a JSON format, or an SVG format. Tools for that can be found in dojox/gfx/utils.js. If your surface is done using the Canvas renderer, then you can export it as a raster image (e.g., .png) using normal non-specific to Dojo ways. I didn't check, but a canvas object may support saving as an image, if a user right-click on it.

A small cheat-sheet below:

How to get a surface from a chart:

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

How to get a canvas element from a surface:

var canvas = surface.rawNode;

How to create an image from a canvas:

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

How to convert a surface to JSON, which can be send to a server:

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

How to convert a surface to SVG, which can be send to a server:

var def = dojox.gfx.utils.toSvg(surface); // returns dojo.Deferred
def.then(function(svgText){
  console.log(svgText);
});
于 2013-05-07T07:57:34.727 回答
1

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

在要求语句中，添加“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();
    });
});
于 2013-05-06T20:17:53.370 回答