Как добавить несколько столбцов на диаграмму с3

Я использую c3.js для диаграмм, и я хочу добавить несколько столбцов для измерения диаграммы, как это

var chart = c3.generate({
    bindto: "#gauge",
    data: {
        columns: [
            ['data', 75.0],
            ['data2', 66]
        ],
        type: 'gauge',
    },
    gauge: {
        min: 50,
        max: 100
    }
});

Я создал пример на jsfiddle: пример. Я хочу показать процент только при наведении мыши на данные. Любая помощь? Благодарю.

Редактировать.

Я нашел какое-то "хакерское" решение. Я скрываю и показываю значение вручную. Есть ли другое решение?

var chart = c3.generate({
bindto: "#gauge",
data: {
    columns: [
        ['data', 75.0],
        ['data2', 66]
    ],
    type: 'gauge',
    onmouseover: function (d, i) {
            jQuery('.c3-focused > .c3-gauge-value').show();
            console.log("onmouseover", d, i);
        },
    onmouseout: function (d, i) {
            var selector = 'g[class*="' + d.id  + '"]';
            jQuery(selector).find('text').hide();
            console.log("onmouseout", d, i);
        }
},
gauge: {
    min: 50,
    max: 100
}
});

jQuery('.c3-gauge-value').hide();

0 ответов

Другие вопросы по тегам