Как добавить несколько столбцов на диаграмму с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();