Добавление значков в гистограммы, сделанные с помощью c3js - PullRequest
Новая
       13

Добавление значков в гистограммы, сделанные с помощью c3js

0 голосов
/ 27 августа 2018

Я сделал гистограмму с накоплением с использованием библиотек c3 и хотел бы добавить значки в каждый столбец (используя c3 или d3).Я просмотрел их документацию, но, похоже, не было никакой соответствующей функциональности!

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

    },
});

1 Ответ

0 голосов
/ 27 августа 2018

Вы можете импортировать font-awesome, а затем (неправильно) использовать конфигурацию формата метки c3, чтобы установить значок для каждой серии 

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 -> 

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

И импортировать FontAwesome css, чтобы получить доступ к глифам (это может быть старая версия) ->

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

Коды глифов можно найти здесь ->

https://fontawesome.com/cheatsheet

Пример: https://jsfiddle.net/h0g1fwpa/19/

...