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

Мне нужно экспортировать диаграмму додзё в формат изображения, предпочтительно PNG. К сожалению, встроенной функции нет, но я нашел способ обойти это. Поскольку диаграммы додзё основаны на графике SVG:

Сначала я получу строку SVG после визуализации диаграммы, затем отправлю эту строку на сервер через ajax, а затем использую библиотеку php ImageMagick для преобразования ее в PNG. Теперь весь процесс работает правильно, но есть проблема:

Строка SVG, которую я получаю из диаграмм додзё, не содержит полной информации, заголовок диаграммы, значения осей и маркеры отсутствуют в строке SVG, в чем может быть проблема?

Ниже приведен код, в котором я перепечатал извлеченную строку SVG из диаграммы додзё в другой 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.

    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 (которая только что была выпущена) в класс Chart была добавлена ​​поддержка свойства htmlLabels. - person Patrick Ruzand; 13.05.2013