Добавление изображения с помощью C3.js

Question

Добавление изображения с помощью C3.js

1

Я пытаюсь добавить изображение в свой график, сделанный в C3.js

Мне нужно, чтобы изображение сидело в центре графика, и у меня есть 6 из этих графиков на одной странице.

Я хочу вместо этого заменить текст транспорта и т.д.

Вот код, который я использую для генерации графиков.

    var transport = c3.generate({

    data: {
        columns: [
            ['Labour', labourLikes],
            ['Greens', greensLikes],
            ['National', nationalLikes],
            ['United Future', unitedfutureLikes],
            ['ACT', actLikes],
            ['NZ First', nzfirstLikes],
        ],
        type: 'donut',
        colors: {
            Labour: '#D82C20',
            Greens: '#00C760',
            National: '#0B6FAA',
            'United Future': '#40003F',
            ACT: '#FFDE00',
            'NZ First': '#000',
        },
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    donut: {
        title: "Education"
    },
    legend: {
        show: false
    },
    bindto: '#education'

});

Буду признателен за любую оказанную помощь.

Sam Hunt 10 июнь 2017, в 11:32

Источник

Теги:

javascript

d3.js

c3.js

1 ответ

Ещё вопросы

Dmitry Demidovsky · Accepted Answer · 2017-06-13T06-13-00.000Z

Вы можете вставить изображение в центральный узел диаграммы пончиков - .c3-chart-arcs

oninit: function() {
    var element = this.selectChart[0][0]
    var center = d3
      .select(element)
      .select('.c3-chart-arcs')
      .insert('image',':first-child')
      .attr('x', -75)
      .attr('y', -75)
      .attr('width', 150)
      .attr('height', 150)
      .attr('xlink:href', 'http://pngimages.net/sites/default/files/small-png-image-20665.png')
}

Смотрите эту скрипку.