Размещение Datalabel в старших чартах - PullRequest
Новая
       18

Размещение Datalabel в старших чартах

0 голосов
/ 03 февраля 2020

Как сделать так, чтобы метка данных желтого цвета в моем образце ниже не перекрывала друг друга в диаграммах Гантта Highcharts и помещала его зигзагообразно? 

cloneToolTip = null
var chart = Highcharts.ganttChart('container', {
    chart: {
        height: 450
    },
    title: {
        text: 'Datalabel placement',
        //color:white
    },

    yAxis: {
        //    color:white,
        // height: 300,
        uniqueNames: true
    },

    navigator: {
        enabled: true,
        liveRedraw: true,
        // top:5,
        height: 20
    },
    scrollbar: {
        enabled: true
    },
    tooltip: {
        enabled: false,
        outside: true,
        headerFormat: '<b>{point.label}</b><br>',
        pointFormat: '{point.info}',
        shared: true
    },
    rangeSelector: {
        enabled: true,
        selected: 0
    },

    series: [{
        name: 'Project 1',
        data: [{
            start: Date.UTC(2019, 1, 1),
            end: Date.UTC(2019, 1, 1),
            color: "white",
            label: '1',
            info: 'Roadmap 19.1, Roadmap 19.1',
        }, {
            start: Date.UTC(2019, 3, 1),
            end: Date.UTC(2019, 3, 1),
            color: "white",
            label: '2',
            info: 'Roadmap 19.2'
        }, {
            start: Date.UTC(2019, 6, 1),
            end: Date.UTC(2019, 6, 1),
            color: "white",
            label: '3',
            info: 'Roadmap 19.3'
        }, {
            start: Date.UTC(2019, 7, 2),
            end: Date.UTC(2019, 7, 2),
            color: "white",
            label: '4',
            info: 'Roadmap 19.4'
        }, {
            start: Date.UTC(2019, 12, 1),
            end: Date.UTC(2019, 12, 1),
            color: "white",
            label: '5',
            info: 'Roadmap 20.1'
        }, {
            start: Date.UTC(2020, 3, 1),
            end: Date.UTC(2020, 3, 1),
            color: "white",
            label: '6',
            info: 'Roadmap 20.2'
        }, {
            start: Date.UTC(2020, 6, 1),
            end: Date.UTC(2020, 6, 1),
            color: "white",
            label: '7',
            info: 'Roadmap 20.3'
        }, {
            start: Date.UTC(2020, 9, 27),
            end: Date.UTC(2020, 9, 27),
            color: "white",
            label: '8',
            info: 'Roadmap 20.4.1, Roadmap 20.4.1, Roadmap 20.4.1, Roadmap 20.4.1, Roadmap 20.4.1, Roadmap 20.4.1, Roadmap 20.4.1, Roadmap 20.4.1, Roadmap 20.4.1'
        }],
        dataLabels: [{
            enabled: true,
            format: '<div>{point.label}</div>',
            shape: 'circle',
            backgroundColor: 'rgba(0, 0, 0, 0.75)',
            color: 'white',
            cursor: "pointer",
            verticalAlign: 'top',
            y: 'max',
            style: {
                cursor: "pointer",
            },
            allowOverlap: false,
        }, {

            formatter: function() {
                let text = this.point.info
                return text.replace(/,/g, "<br>")
            },
            allowOverlap: false,
            verticalAlign: 'middle',
            backgroundColor: '#fffaba',
            shape: 'round',
            borderRadius: 10,
            borderWidth: 1,
            borderColor: 'black',
            style: {
                color: 'blue',
                textOutline: 'none',
                cursor: "pointer",
            },

        }],
    }],

}, function(chartObj) {
    chartObj.series[0].data[0].dataLabel[1].on('click', function(e) {
        console.log('ff');
        console.log(chartObj.series[0].data)
        // Highcharts.charts[0].tooltip.refresh(chart.series[0].points[0]);
    })
});

Вот мой код пример в JSFiddle

...