Использование модуля экспорта Highcharts с jspdf и svg2pdf локально - PullRequest
Новая
       34

Использование модуля экспорта Highcharts с jspdf и svg2pdf локально

0 голосов
/ 29 февраля 2020

Я пытаюсь использовать модуль экспорта highcharts с jspdf и svg2pdf локально. В экспортированном pdf какая-то часть моего графика была выброшена. Кто-то может мне помочь? Вот мой код: https://jsfiddle.net/heliya_darvish/epwn7u9f/48/

Highcharts.chart('container', {
    title: {
        text: null
    },
    chart: {
        type: 'area',
        backgroundColor: 'transparent',
        marginTop: 50,
        marginLeft: 50,
        marginRight: 30
    },
    exporting: {
    		enabled: false
    },
    xAxis: {
    		tickmarkPlacement:'on',
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: null
        },
        min: 0.0,
        max: 88.6
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: false
            },
            label: {
                enabled: false
            },
            fillOpacity: 0.05,
            cursor: 'pointer'
        }
    },
    series: [{
    		name: 'total',
        color:'rgba(36, 166, 219, 1)',
        data: [
            65.0, 67.2, 79.5, 88.6, 75.0
        ]
    }, {
        name: 'correct',
        color:'rgba(101, 178, 61, 1)',
        data: [
            40.0, 45.2, 31.5, 51.6, 15.0
        ]
    }, {
        name: 'wrong',
        color:'rgba(247, 99, 99, 1)',
        data: [
            17.0, 55.2, 45.5, 5.6, -15.0
        ]
    }, {
        name: 'no-answer',
        color:'rgba(200, 160, 0, 1)',
        data: [
            15.0, 21.2, 22.5, 28.6, 13.2
        ]
    }]
});

document.getElementById("export-pdf").onclick = function() {
  var svg = document.getElementById('container').querySelector("svg");
  var pdf = new jsPDF('l', 'pt', [700, 300]);
  
  svg2pdf(svg, pdf, {
    scale: 72 / 96
  });
  
  pdf.save("myChart.pdf");
};
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/8.0.0/lib/jspdf.js"></script>
<script src="https://code.highcharts.com/8.0.0/lib/svg2pdf.js"></script>
<script src="https://code.highcharts.com/8.0.0/lib/rgbcolor.js"></script>

<div id="container"></div>

<div>
  <button id="export-pdf">Export to PDF</button>
</div>

Вот мой экспортированный pdf: https://drive.google.com/file/d/1EGqSZcSAbJYdAw-csyVKBwXNA-HgBWJr/view

Это изображение основного графика: введите описание изображения здесь

А это изображение экспортированной диаграммы в формате PDF: введите описание изображения здесь

...