проблем с повърхността на dojox.charting.Chart SVG

Трябва да експортирам диаграма на доджо във формат на изображение, за предпочитане PNG. За съжаление няма вградена функция, но намерих начин за това. Тъй като диаграмите на доджо са базирани на SVG графики:

Първо ще получа SVG низа, след като диаграмата бъде изобразена, след това ще изпратя този низ на сървъра чрез ajax и след това ще използвам php библиотеката ImageMagick, за да го конвертирам в PNG. Сега целият процес работи правилно, но има проблем:

SVG низът, който получавам от dojo Charts, не съдържа пълни подробности, заглавието на диаграмата и стойностите на осите и маркерите не присъстват в 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/


javascript svg dojo dojox.charting
person asim-ishaq    schedule 08.05.2013    source източник

Отговори (1)


arrow_upward
1
arrow_downward

По подразбиране етикетите се изчертават с помощта на HTML маркировки, така че не са част от gfx сцената. Ето защо те не са в генерирания svg изход. Трябва изрично да изключите изобразяването на HTML етикети със свойството htmlLabels: false axis.

    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 изхода.

person Patrick Ruzand    schedule 08.05.2013
comment
Къде трябва да посоча тази опция. Можете ли да обясните чрез кодов фрагмент. - person asim-ishaq; 09.05.2013
comment
Добре. Благодаря, че работи за оста, но заглавието все още не е в SVG низ. Вижте jsfiddle.net/HAfSd/10 - person asim-ishaq; 12.05.2013
comment
Наистина, в Dojo ‹= 1.8, това е само за ос за съжаление. От Dojo 1.9 (който току-що беше пуснат), поддръжката за свойството htmlLabels е добавена към класа Chart. - person Patrick Ruzand; 13.05.2013