将图标添加到使用c3js制作的条形图中 [英] Adding icons to bar charts made using c3js

问题描述

我已经使用c3库制作了一个堆积的条形图，并希望向每列添加图标(使用c3或d3).我浏览了他们的文档，但似乎没有任何相关功能！

I have made a stacked bar chart using c3 libraries and would like to add icons to each column (using c3 or d3). I went through their documentation but there doesnt seem to be any relevant functionality!

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100],
            ['data2', 130, 100, 140]
        ],
        type: 'bar',
        groups: [['data1', 'data2']]

    },
});

推荐答案

您可以导入真棒字体，然后(mis)使用c3的标签格式配置为每个系列设置图标

You can import font-awesome and then (mis)use c3's label format configuration to set an icon for each series

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250],
            ['data2', -50, 150, -150, 150, -50, -150],
            ['data3', -100, 100, -40, 100, -150, -50]
        ],
        groups: [
            ['data1', 'data2']
        ],
        type: 'bar',
        labels: {
//            format: function (v, id, i, j) { return "Default Format"; },
            format: {
                data1: function (v, id, i, j) { return "\uf1ec"; }, // a calculator
                data2: function (v, id, i, j) { return "\uf212"; }, // a book
                data3: function (v, id, i, j) { return "\uf1ae"; },  // a human
            }
        }
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    }
});

您将需要此CSS规则->

You'll need this css rule -->

.c3-chart-text .c3-text {
  font-family: 'FontAwesome';
}

并导入FontAwesome css以访问字形(这可能是旧版本)->

And to import the FontAwesome css to get access to the glyphs (this may be an old version) -->

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

字形代码可以在这里找到->

The glyph codes can be found here -->

https://fontawesome.com/cheatsheet

示例: https://jsfiddle.net/h0g1fwpa/19/

这篇关于将图标添加到使用c3js制作的条形图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！