visjs圖標未在Chrome中顯示

Question

我正在使用visjs，遇到一個神秘的問題，當顯示網頁時，節點的圖標未顯示。 圖標僅在單擊顯示區域后才會顯示。 在jsfiddle（不是我的）出現同樣的問題之后： http : //jsfiddle.net/adgd87/szt7h6kv/

這是代碼：

    var nodeSet = [{
      id: 1,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf286',
    size: 40,
    color: '#57169a'
  },
  label: '1: fa-fort-awesome - f286',
}, {
  id: 2,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf1d1',
    size: 40,
    color: '#f0a30a'
  },
  label: '2: fa-empire - f1d1'
}];

// create an array with nodes
var nodes = new vis.DataSet(nodeSet);

// create an array with edges
var edges = new vis.DataSet([{
  from: 1,
  to: 2
}, {
  from: 1,
  to: 3
}]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  layout: {
    randomSeed: 2
  },
  edges: {
    arrows: 'to'
  },
  legend: {
    enabled: true
  }
};

var network = new vis.Network(container, data, options);

謝謝你的提示

Answer 1

發生的情況是，繪圖開始時尚未將字體加載到頁面中，並且由於字體圖標通常使用通常不帶字符的Unicode空間，因此顯示了一個正方形矩形。 加載字體后，繪圖引擎可以使用正確的字體重新繪畫，因此您將看到出現的圖像。 通常，繪圖引擎使用惰性繪圖技術，因此單擊是觸發它的一種簡單方法。

但是現在出現了一個復雜的問題：如何知道何時加載字體資產？ 跟蹤字體的加載過程是一項極其復雜的任務，現在新的CSS字體加載W3C規范已解決了這一問題。

但是它的支持還不是很好，正如您可以在“ 我可以使用”頁面上看到的那樣：

使用超時不是解決方案，您只是打賭超時將在加載字體后立即觸發。 如果用戶連接來自移動設備，請相信我，這是不正確的。

這意味着您需要一些幫助程序，幸運的是，存在一個跨瀏覽器的幫助程序，它稱為WebFontLoader 。

您需要做的是預加載字體，然后啟動vuejs：

 <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
 <script>
   WebFont.load({
     custom: {
      families: ['My Font']
     },
     // startYourChart is your function that starts the chart drawing
     // when the font is loaded start to draw the chart
     active: startYourChart,
     // The detection in older browser for FontAwesome doesn't always work
     // so this one makes sure that your chart starts after a loading timeout
     inactive: startYourChart
   });
 </script>

在使用Angular的情況下，這里有一個方便的WebFontLoader包裝器： angular-webfontlaoder 。 在example.html它顯示了如何使用它：

var app = angular.module('TestApp', ['webfont-loader']);
app.controller('TestController', function($scope) {
  $scope.$on('webfontLoader.loaded', function() {
    alert('font loaded!');
  });
});

PS有關一些有關“字體加載”工作原理和優化策略的信息，請參見一些有趣的頁面：

• 通過字體顯示控制字體性能
• 具有字體加載事件的更好的@ font-face
• 字體加載策略綜合指南