Question

我需要将道场图表导出为图像格式，最好是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/

Answer 1

默认情况下，标签是使用HTML标记绘制的，因此它们不属于gfx场景。这就是为什么它们不在生成的svg输出中。您应该使用htmlLabels：false axis属性显式关闭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输出中。

dojox.charting.Chart SVG表面问题

1 个答案: