html - 带有 Jqplot 的字体真棒图标

Question

我正在使用 jqplot 创建一个自定义条形图。我需要在哪里显示带有值的图标。所以我决定使用字体很棒的图标，它的效果很好。

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

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

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

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

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

Answer 1

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

Answer 2

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

Jqplot正在基于_jqToImage()中的元素创建画布。我在其中添加了处理标签“i”的代码（用于字体真棒）。实际上，我正在获取当前元素的类并映射其 Unicode 值。字体真棒备忘单在这里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);
          }
          // ..........
         }