0

我需要将道场图表导出为图像格式，最好是 PNG。不幸的是，没有内置功能，但我找到了解决方法。由于道场图表基于 SVG 图形：

我将在图表渲染后首先获取 SVG 字符串，然后通过 ajax 将此字符串发送到服务器，然后使用 ImageMagick php 库将其转换为 PNG。现在整个过程运行正常，但有一个问题：

我从 dojo Charts 获得的 SVG 字符串不包含完整的详细信息，图表标题和轴值以及标记不存在于 SVG 字符串中，可能是什么问题？

以下是我将提取的 SVG 字符串从 dojo Chart 重新打印到另一个 div 的代码，您可以直观地看到差异。

var mychart;

require(["dojo/ready", "dojox/charting/Chart2D", "dojox/gfx/utils", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/Highlight", "dojox/charting/themes/Claro"], function (ready, Chart, Utils, Tooltip, Highlight, ClaroTheme) {
  ready(function () {
    mychart = Chart("mychart");
    mychart.title = "My Chart";

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

    var column_tooltip = new Tooltip(mychart, "column_plot");
    var column_highlight = new Highlight(mychart, "column_plot");

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

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

    mychart.setTheme(ClaroTheme);
    mychart.render();

     //this function will be called after render to send SVG to server via AJAX
    document.getElementById("syncbutton").onclick = function (e) {
       var svgString = Utils.toSvg(mychart.surface).results[0];
       document.getElementById("svgchart").innerHTML = svgString;       
    };

  });
});

http://jsfiddle.net/HAfSd/7/

4

1 回答 1

1

默认情况下，标签是使用 HTML 标记绘制的，因此它们不是 gfx 场景的一部分。这就是为什么它们不在生成的 svg 输出中的原因。您应该使用 htmlLabels: false 轴属性显式关闭 HTML 标签呈现。

    chart.addAxis("x", {
          type : "Default", 
          fixLower: "minor",
          natural: true,
          enableCache: true,
          htmlLabels: false,
          majorTick: {color: "red", length: 4},
          minorTick: {color: "blue", length: 2}
    });

在此配置中，标签通过底层 gfx 渲染器（svg、canvas 等）渲染，并将在 svg 输出中。

于 2013-05-08T20:19:02.313 回答