Легенда диаграммы Chartjs Gantt (с использованием линии типа диаграммы) имеет перекрывающиеся цветные блоки и текст легенды - PullRequest
Новая
       49

Легенда диаграммы Chartjs Gantt (с использованием линии типа диаграммы) имеет перекрывающиеся цветные блоки и текст легенды

0 голосов
/ 02 апреля 2019

Я создаю диаграммы Ганта для демонстрационных работ для разных команд.Я нашел статью об использовании Chartjs и линии типа графика для создания диаграммы Ганта, которая работает хорошо.Однако у меня возникла проблема с легендой.

Я обнаружил, что легенда имеет точечный график позади того места, где будет нормальный квадрат легенды.

Изображение выпуска легенды диаграммы Ганта

Iпоэкспериментировал с некоторыми вариантами диаграммы, и только если я изменил borderWidth, сторона дополнительного цвета, кажется, изменится.Кроме того, я произвел случайную выборку цветов, и именно так я заметил, что они были такими же, как нанесенные столбцы Ганта.

Я также попытался сделать его белым, но столбцы также стали белыми, и это, очевидно, не работает

Мой код для диаграммы приведен ниже. 

var ganttChart2 = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
        {
            label: 'Team 1',
            backgroundColor: '#FFF',
            borderColor: colourPicker(),
            fill: false,
            borderWidth : 30,
            pointRadius : 0,
            data: [
                {
                    x: new Date("2018-01-01"),
                    y: 2
                }, {
                    x: new Date("2018-02-02"),
                    y: 2
                }
            ]
        },
        {
            label: 'Team 2',
            backgroundColor: '#FFF',
            borderColor: colourPicker(),
            fill: false,
            borderWidth : 30,
            pointRadius : 0,
            data: [
                {
                    x: new Date("2018-01-20"),
                    y: 4
                }, {
                    x: new Date("2018-02-20"),
                    y: 4
                }
            ]
        },
        {

            label: 'Team 3',
            backgroundColor: '#FFF',
            borderColor: colourPicker(),
            fill: false,
            borderWidth : 30,
            pointRadius : 0,
            data: [
                {
                    x: new Date("2018-02-15"),
                    y: 6
                }, {
                    x: new Date("2018-03-15"),
                    y: 6
                }
            ]
        },
        {
            label: 'Team 4',
            backgroundColor: '#FFF',
            borderColor: colourPicker(),
            fill: false,
            borderWidth : 30,
            pointRadius : 0,
            data: [
                    {
                    x: new Date("2018-03-01"),
                    y: 8
                    }, {
                    x: new Date("2018-04-01"),
                    y: 8
                    }
                ]   
            }
        ]  
    },

    options: {
        responsive: true,
        legend : {
            display : true,
            position: 'right',
            labels: {
                padding: 30,
                boxWidth: 10,
            },
        },

        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'series',
                time: {
                    unit: 'month',
                    },

                position: 'bottom',
                ticks : {
                    beginAtzero : false,
                    stepSize : 2,
                }
            }],
            yAxes : [{
                scaleLabel : {
                    display : false
                },
                ticks : {
                    display: false,
                    beginAtZero :true,
                    stepSize: 1,
                    max : 10
                }
            }]
        },
        title: {
            display: true,
            text: 'Gantt chart version 2 - working with dates for axis'
        }
    }
});

Я хочу, чтобы в легенде не было никакого дополнительного цвета, кроме обозначенных полей для цветов.В настоящее время они настроены на белый цвет, чтобы их можно было увидеть.

...