Question

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

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

enter image description here

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

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

在require statment中，添加“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 2

没有直接支持将图表另存为图像。任何dojox.gfx曲面（包括图表）都可以以JSON格式或SVG格式保存。可以在dojox/gfx/utils.js中找到相关工具。如果使用“画布”渲染器完成曲面，则可以使用正常的非特定于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);
});

Answer 3

除了必须将鼠标悬停在线上的确切标记上的工具提示之外，您还可以使用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功能并引用当前在图表上选择的任何值。

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

3 个答案: