Question

我正在创建甘特图以演示不同团队的工作。我找到了一篇有关使用Chartjs和图形类型线来创建效果很好的甘特图的文章。但是，我对图例有疑问。

我发现图例在常规图例正方形所在的位置后面有一个散点图。

我使用了一些图表选项，并且只有当我更改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'
        }
    }
});

我希望图例上除了指定的颜色框之外没有其他颜色。目前将它们设置为白色，以便可以看到它们。

Chartjs Gantt（使用图形类型线）图表图例具有重叠的颜色块和图例文本

0 个答案: