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

Question

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

我的问题是，你也可以使用一些图标字体作为点吗？谢谢。

Answer 1

直接放font icon 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>

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

How to use an Icon font for billboard.js chart point rendering

javascript

charts

billboard.js