雷达图高分辨率帆布为pdf文件

时间:2017-06-15 07:03:15

标签: javascript google-chrome pdf html5-canvas chart.js

我在下面给出了使用Chart.js显示雷达图的给定代码。当我在屏幕上将其显示为PDF时,它显得模糊。我一直在尝试使用Chrome上的webkitBackingStorePixelRatio和devicePixelRatio进行扩展,但我有点卡住了。

- HTML -

<div class="chart">
    <canvas id="myChart"></canvas>
</div>

- 使用Javascript -

<script>

        var ctx1 = document.getElementById("myChart");

        var myRadarChart1 = new Chart(ctx1, {
            type: 'radar',
            data: {
                labels: {{ competenceCleTitle|json_encode|raw }},
                datasets: [
                    {
                        backgroundColor: "#F79646",
                        borderColor: "#f59c1a",
                        pointBackgroundColor: "#f59c1a",
                        pointBorderColor: "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "#f59c1a",
                        pointRadius: 0,
                        data: {{ competenceCleNiveau|json_encode|raw }}
                    }
                ]
            },
            options: {
                legend: {
                    display: false
                },
                responsive: true,
                scale: {
                    reverse: false,
                    ticks: {
                        display: false,
                        maxTicksLimit: 8,
                        stepSize: 1,
                        beginAtZero: true,
                        max: 5
                    }
                }
            }
        });
</script>

0 个答案:

没有答案