Невозможно экспортировать диаграммы c3.js с элементами DIV - PullRequest
Новая
       39

Невозможно экспортировать диаграммы c3.js с элементами DIV

0 голосов
/ 12 мая 2018

Я создал этот график, используя c3.js

enter image description here

Две верхние строки текста / числа в Div. Две нижние левые кнопки успешно преобразуют этот SVG-график в png и pdf. Теперь мой клиент хочет, чтобы две верхние строки текста были экспортированы с PDF и JPG. Но PDF и JPG программы только экспортируют элементы SVG. Как я могу добавить эти две строки текста с SVG с одинаковым форматированием, чтобы их можно было экспортировать с диаграммой?

Я попытался добавить div в элемент SVG, используя этот код JavaScript. 

var ns = 'http://www.w3.org/2000/svg';
var svg = document.querySelector( 'svg' );
var foreignObject = document.createElementNS( ns, 'foreignObject');
foreignObject.setAttribute('height', 300);
foreignObject.setAttribute('width', '100%');
var div = document.createElement('div');
div.innerHTML = '<div><div class="export-text"><span class="export-text-heading">{{DISPLAY DATA HERE}}</span></div></div>';
foreignObject.appendChild( div ); 
svg.appendChild(foreignObject);

Есть несколько div внутри вывода. Но программы экспорта JPG и PDF не позволяют экспортировать div и показывают эту ошибку.

Произошла ошибка при загрузке URI данных в виде изображения на следующем SVG

Мой PDF Экспортный код 

function export_pdf_tracker(){
  $('#chart-tracker').find('svg').attr('xmlns','http://www.w3.org/2000/svg');
  xepOnline.Formatter.Format('chart-tracker',{pageWidth:'20in', pageHeight:'15.5in',render:'download', srctype:'svg', filename:'Activity-Tracker-Report', resolution:'300', cssStyle:[{fontSize:'40px'},{fontWeight:'bold'}]});
}

и мой код экспорта PNG / JPG 

function svgToPng(chartID) {
    //fix weird back fill
    d3.select('#'+chartID).selectAll("path").attr("fill", "none");
    //fix no axes
    d3.select('#'+chartID).selectAll("path.domain").attr("stroke", "black");
    //fix no tick
    d3.select('#'+chartID).selectAll(".tick line").attr("stroke", "black");
    var svgElement = $('#'+chartID).find('svg')[0];
    saveSvgAsPng(svgElement, chartID+'.png');
}

оба кода успешно работают, но не с элементом div.

Вот как это отображается, когда я добавляю div к графику.

enter image description here

, но невозможно экспортировать с div. Пожалуйста, предложите, если есть какой-нибудь способ добавить расположение этих двух строк в график SVG, чтобы он мог легко экспортировать, или есть какой-нибудь код для преобразования div в svg?

1 Ответ

0 голосов
/ 12 мая 2018

Я нашел ответ. Я написал этот код для добавления каждого текстового блока. Итак, я создаю 8 текстовых блоков. Теперь они отлично экспортируют в JPG и PDF. 

d3.select("#chart-tracker svg").append("text")
 .attr("x", 780 )
 .attr("y", 50)
 .style("text-anchor", "left")
 .style("font-size", "17px")
 .text("Start Date");
...