canvg和highcharts如何包括图表图例和保持图表大小？ [英] canvg and highcharts how to include chart legend and keep the chart size?

问题描述

我想使用canvg在画布中绘制一个highchart。

我遇到的问题是图表图例不会出现在画布上，而且尺寸和质量也会降低。

  $（'＃container'）。highcharts（{
 
 credits：{
 enabled：false 
}，
 $ b b xAxis：{
 categories：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct' ，'Nov'，'Dec'] 
}，
 
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5， 216.4，194.1，95.6，54.4] 
}] 
 
}）; 
 
 function exportChart（）{
 var svg = canvg（document.getElementById（'canvas'），getSVG（），{ignoreDimensions：true}）; 
} 
 
 function getSVG（）{
 debugger 
 var chart = $（'＃container'）。 
 var svg = chart.getSVG（）; 
 return svg; 
} 
  

解决方案

c $ c> ignoreDimensions：true 它运行良好，我认为： http： //jsfiddle.net/Fusher/qDmhV/148/

如果您希望图表具有相同的大小 - 您需要具有相同的画布容器

$ b

• disabled ignoreDimensions：
  




• without disabled ignoreDimensions：
  

I'm trying to use canvg to draw a highchart inside a canvas.

the problem I have is that the chart legends dont appear in the canvas and also the size and quality is reduced.

$('#container').highcharts({

            credits: {
                enabled: false
            },

            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },

            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]

        });

    function exportChart() {
        var svg = canvg(document.getElementById('canvas'), getSVG(), { ignoreDimensions: true });
    }

    function getSVG() {
        debugger
        var chart = $('#container').highcharts();
        var svg = chart.getSVG();
        return svg;
    }

解决方案

When you remove option ignoreDimensions: true it works good, I think: http://jsfiddle.net/Fusher/qDmhV/148/

If you want to have the same size for chart - you need to have canvas container the same width and height as for chart.

Edit:

• with disabled ignoreDimensions:

• without disabled ignoreDimensions:

这篇关于canvg和highcharts如何包括图表图例和保持图表大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！