javascript - 如何使用Icon字体进行billboard.js图表点渲染 - Thinbug

如何使用Icon字体进行billboard.js图表点渲染

时间：2018-08-20 12:30:55

标签： javascript charts billboard.js

This example shows how to use different kind of points在billboard.js中。

我的问题是，您还可以使用某些图标字体作为要点吗？谢谢。

1 个答案:

答案 0 :(得分：0)

只需将字体图标char值直接放在<text>节点周围即可。

查看以下示例：

var chart = bb.generate({
  data: {
    columns: [
      ["data1", 100, 400, 1000, 900, 500],
      ["data2", 20, 40, 500, 300, 200]
    ]
  },
  point: {
    pattern: [
      "<g><text x='-10' y='40' style='font-family:FontAwesome;font-size:40px'></text></g>"
    ]
  }
});


// In case of don't know set font chars, also can do as
// chart.$.defs.selectAll("text").text(() => '\uf083');

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/theme/insight.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
    <div id="chart"></div>
</body>
</html>