Chartjs + jsPDF = Размытое изображение

Question

У меня возникли проблемы с экспортом моих диаграмм в PDF.

Я это Диво

<div id="chart-area"> 
    <button type="button" id="btnPrint_" onClick="Print1()">Print</button> 
    <?php echo '<h2 id="title">'.$_SESSION['team_name'].'</h2>'; ?> 
     <canvas id="myChart" width="800" height="400"></canvas> 
     <div id="legend"></div> 
    </div> 

и я создаю мой график, используя ChartJS

$(document).ready(function(){ 
    var helpers = Chart.helpers; 
    var canvas = document.getElementById('myChart'); 
    var data = { 
     labels: unique_dates, 
     datasets: [ 
      { 
       label: "Ticket Count", 
       fillColor: "rgba(107, 110, 111, 0.6)", 
       strokeColor: "rgba(107, 110, 111, 0.6)", 
       highlightFill: "rgba(107, 110, 111, 0.6)", 
       highlightStroke: "rgba(151,137,200,1)", 
       data: ticket_count 
      }, 
      { 
       label: "Subsidy Count", 
       fillColor: "rgba(8, 126, 210,0.5)", 
       strokeColor: "rgba(8, 126, 210,0.8)", 
       highlightFill: "rgba(220,220,220,0.75)", 
       highlightStroke: "rgba(220,220,220,1)", 
       data: subsidy_count 
      } 
     ] 
    } 


    var bar = new Chart(canvas.getContext('2d')).Bar(data, { 
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb", 
    animation: true, 
}); 
// 
var legendHolder = document.createElement('div'); 
legendHolder.innerHTML = bar.generateLegend(); 

document.getElementById('legend').appendChild(legendHolder.firstChild); 

}); 

Когда я нажимаю btnPrint_ кнопку Я хочу, чтобы экспортировать свою таблицу в формате PDF

function Print1() { 
      var title = $("#title").text(); 
      var doc = new jsPDF('l', 'mm',[210, 297]); 
      html2canvas($("#myChart"), { 
       onrendered: function(canvas) {   
        var imgData = canvas.toDataURL('image/png',1.0);     
        doc.text(130,15,title+" GT Log"); 
        doc.addImage(imgData, 'PNG',20,30,0,130); 
        doc.addHTML(canvas); 
        doc.save(title+'gt_log.pdf');    
        }  
      }); 

} 

Проблема в том, что моя диаграмма полностью размыта в файле pdf.

Любая идея, как исправить это?

это первый раз, когда я использую ChartJS и jsPDF, поэтому, вероятно, я делаю что-то неправильно.

Спасибо!

Answer 1

Разрешение определяется размером холста. Чем больше вы увеличиваете холст (ширина и высота), тем лучше будет разрешение при загрузке вашего PDF-файла.

Однако вы, вероятно, не хотите слишком сильно увеличивать размер холста, поэтому один трюк, который вы можете использовать, - это создать скрытый холст с более высокой шириной и высотой, использовать его для печати диаграммы и создания PDF, получая лучшее качество PDF.

Вот скрипка, демонстрирующая это, с возможностью загрузки PDF-файла, созданного с оригинального холста/диаграммы, и еще один вариант для загрузки нового PDF-файла из скрытого холста/диаграммы. Вы можете увидеть, как качество увеличивается при сравнении обоих результатов.

https://jsfiddle.net/crabbly/kL68ey5z/

Я не думаю, что это лучшее решение, однако, это единственный способ, которым я мог придумать, чтобы повысить качество моих PDF файлов графиков. Я сейчас играю в обеих библиотеках, особенно, когда jsPDF обрабатывает аргументыи h при создании документов.

Кроме того, Chart.js имеет встроенную функцию для извлечения изображения из диаграммы (.toBase64Image()), однако качество, кажется, хуже, когда я тестировал.

Answer 2

Я работаю над проектом, пытающимся создать графики с диаграммами, а затем распечатывать их с помощью функции печати Chrome в PDF, и я обнаружил, что графики диаграмм выглядят плохо. После прочтения различных потоков как в stackoverflow, так и github я разработал одно решение, которое достаточно хорошо работало для меня.

В моем конкретном случае мне нужны графики с фиксированным размером, и я не могу заставить их реагировать, потому что мне нужно, чтобы они правильно вписывались в печатную страницу. Я использую тег стилей, чтобы установить размер:

<canvas style="width: 300px; height: 300px" />

Я обнаружил, что если вы установите отзывчивой ложь в таблице, а затем использовать тег стиля, как, что, Chartjs не будет связываться с размером график. Использование любого другого метода, такого как установка ширины или высоты (не ширина или высота стилей) или использование классов css, не будет правильно настроено.Кажется, что Chartjs работает, когда я устанавливаю для него встроенный тег стиля элемента.

Во всяком случае, трюк, который работал для меня в улучшении вывода PDF, заключался в том, чтобы Chartjs отображал большую диаграмму, а затем уменьшал ее до меньшего размера, чтобы она соответствовала моей странице.

Скажем, по какой-то причине мы хотим иметь диаграмму пикселей 300 × 300 и что она выглядит плохой, когда мы печатаем ее в формате PDF. Нам нужно, чтобы Chartjs нарисовал этот график в более крупном графике, а затем изменил его размер до 300x300. В моем собственном проекте у меня есть Chartjs, нарисуйте его как 2x. Таким образом, для этого примера я хотел бы сделать брезентовый элемент, 600x600 следующим образом:

<canvas style="width: 600px; height: 600px;" class="graph" /> 

В то же время у меня есть «граф» CSS класс с высотой и шириной, установленной в 300px. Однако диаграмма не будет отображаться на 300 пикселей из-за встроенного стиля.

Вы можете сделать диаграмму, как обычно, но сразу же после строки кода, которая составляет диаграмму, вы удаляете тег стиля встроенного стиля из диаграммы. Я обнаружил, что когда вы это сделаете, диаграммы будут рисовать диаграмму с большим размером 600x600, но тогда график моментально будет изменен до 300x300. Вот пример того, как выглядит код:

var ctx = canvas.getContext ('2d'); var mychart = new Chart (ctx, {.... }); canvas.removeAttribute ("стиль");

canvas.removeAttribute удаляет тег встроенного стиля, поэтому то класс CSS вступает в силу и мгновенно вызывает полотно, чтобы вновь сделать в меньшем размере. Нет вспышки или каких-либо признаков того, что это произошло, но я обнаружил, что вы получаете гораздо более качественный график.

Есть еще одна проблема с этим. Вам нужно будет спроектировать свою диаграмму для большего размера 600x600, например, чтобы заставить ее выглядеть правильно. Когда вы рисуете диаграмму большего размера, линии и шрифты не изменяются, поэтому все выглядит очень крошечным. Мне пришлось вручную установить диаграмму для большего размера, чтобы ее проектировать и сначала определить хорошие шрифты и размеры линий для графика, а затем сделать трюк с изменением размера.

Я также обнаружил, что просто использование диаграммы меньшего размера и создание более толстых линий или более крупных шрифтов, похоже, не оказывают такого же эффекта, как сначала определение размера, а затем рендеринг его как меньшего размера.