Я пытаюсь сделать диаграмму области, используя c3. Диаграмма области должна быть кликабельной в полной области.
var outageArea = [[0,1], [4,5]];
var existingOutageAnnotations = [[0,2]];
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, null, null, 40, null, null],
['data2', 200, null, null, 240, null, null],
['outage', null, 200, 200, null, 200, 200],
['data4', 200, null, null, 240, null, null],
['data5', 130, null, null, 140, null, null],
['data6', 90, null, null, 50, null, null],
],
type: 'scatter',
selection: {
grouped: true
},
types: {
outage: 'area'
},
onclick: function (d, i) {
var isAnnotationpRSENT = false;
if(d.name == "outage"){
for (i = 0; i < existingOutageAnnotations.length; i++){
if (d.x >= existingOutageAnnotations[i][0] && d.x <= existingOutageAnnotations[i][1]){
isAnnotationpRSENT=true;
}
}
if(isAnnotationpRSENT){
alert("update annotation");
}else{
alert("create annotations");
}
}
console.log("onclick", d, i);
}
},
tooltip: {
format: {
title: function (d) {
console.log(d);
return 'Data ';
},
},
contents: function(d, defaultTitleFormat, defaultValueFormat, color){
if (d[2].id == "outage"){
return "<div class='annotation-tooltip'> Outage" + d[2].value +'</div>'
}else{
return "<div class='annotation-tooltip'> Normal</div>"
}
}
}
});
Ниже приведена ссылка jsfiddle:
https://jsfiddle.net/a958p7co/
Я сделал попробуйте с selection.grouped = true, но это не сработало.