字体真棒图标与Jqplot

Question

我正在使用jqplot创建自定义条形图。我需要在哪里显示带有值的图标。所以我决定使用font-awesome图标，效果很好。

通过转义html，我可以在条形图中显示自定义标签。

现在我需要将此图表导出为PDF。尝试使用jqplot函数转换为图像时

$("#chart1").jqplotToImageElem().src

导出的图像上缺少字体真棒图标。

我如何解决这个问题，有什么想法吗？

Answer 1

我怀疑jqplot图像功能不支持使用伪类添加的内容（Font Awesome使用：之前在页面上显示图标）。如果可能，请尝试在HTML标记内添加unicode字符，看看是否有效。

Answer 2

以下是我解决这个问题的方法。

Jqplot 正在根据 _jqToImage（）中的元素创建画布。我已经添加了处理标签“i”的代码（对于字体很棒）。实际上我得到当前元素的类并映射其Unicode值。 Font Awesome备忘单在这里http://fortawesome.github.io/Font-Awesome/cheatsheet/

        function _jqpToImage(el, x_offset, y_offset) {
        // .........
        if ((tagname == 'div' || tagname == 'span') 
          {
           // ...........
          }
         if (tagname == 'i') {
            var element = $(el);
            var elClass = el.classList[1];
            var icons = {
                    'fa-angle-up': { content: 'f106' },
                    'fa-angle-down': { content: 'f107' },
                    'fa-angle-double-up': { content: 'f102' },
                    'fa-angle-double-down': { content: 'f103' },
                    'fa-minus': { content: 'f068' }
                     };
            var uni = '"\\u' + icons[elClass].content + '"';
            var hexstring = eval(uni);
            var iconFontWeight = window.getComputedStyle($('.' + elClass).get(0), ':before').getPropertyValue('font-weight');
            var iconColor = window.getComputedStyle($('.' + elClass).get(0), ':before').getPropertyValue('color');
            var iconFontSize = window.getComputedStyle($('.' + elClass).get(0), ':before').getPropertyValue('font-size');

            newContext.font = iconFontWeight + " " + iconFontSize  + " FontAwesome";
            newContext.fillStyle = iconColor;
            writeWrappedText(el, newContext, hexstring , left, top, w);
          }
          // ..........
         }