Диаграмма площади C3 делает кликабельной - PullRequest
0 голосов
/ 26 февраля 2020

Я пытаюсь сделать диаграмму области, используя 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, но это не сработало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...