带有 Jqplot 的字体真棒图标答案

【问题标题】：Font Awesome icons with Jqplot带有 Jqplot 的字体真棒图标
【发布时间】：2014-10-13 14:06:07
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： html base64 jqplot font-awesome svg-font

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：