ChartJS悬停工具提示颜色不显示其正确的颜色

Question

我用ChartJS制作了这个图表。到目前为止，我已经让它工作了，但是，当添加更多的数据时，比如2行..工具提示将丢失其颜色。我说的是值左边的白框：

​

​

正如你所看到的，这里有两行。一个是收入，一个是存款。存款是最低的，收益是最高的。为什么白色正方形是白色的？应该和这条线一样吗？

下面是我的代码：

图表：

var ctx = document.getElementById('orders_graph').getContext('2d');

    var Order_chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: [], // months
            datasets: [{
                label: 'Fortjenelse',
                data: []
            }]
        },

        // Configuration options go here
        options: 
        {
            responsive: true,
            hover: {
              mode: 'index',
              intersect: false
            },
            spanGaps: true,

            legend: {
                display: false
            },
            tooltips: {
                mode: 'index',
                intersect: false,
                callbacks: {
                   label: function(tooltipItem) {
                          return ' '+tooltipItem.yLabel+' DKK';
                       }
                   }
            },
            layout: { 
                // padding: { left: 0, right: 0, top: 10, bottom: 30}
            },
            scales:{
                xAxes: [{
                    display: true //this will remove all the x-axis grid lines
                }],
                yAxes: [{
                    display: true, //this will remove all the x-axis grid lines
                    stacked: false,
                    ticks: {
                        beginAtZero: true
                    },
                }],
            }
        }
    });

将数据传递给图表：

Order_chart.data.labels = order_array_parent_index;
        Order_chart.data.datasets = [{
                                        // Fortjenelse med renter
                                        label: 'Profit',
                                        data: order_array_parent,
                                        fill: false,
                                        lineTension: 0,
                                        backgroundColor: [
                                            'rgba(113, 217, 98, 0.2)',
                                        ],
                                        borderColor: [
                                            'rgba(113, 217, 98, 1)',
                                        ],

                                    },
                                    {
                                        // Deposited amount
                                        label: 'Deposit',
                                        data: order_array_parent_deposits,
                                        fill: false,
                                        lineTension: 0,
                                        backgroundColor: [
                                            'rgba(255, 223, 82, 0.2)',
                                        ],
                                        borderColor: [
                                            'rgba(255, 223, 82, 1)',
                                        ],

                                    },
                                    ]
        Order_chart.update(); 

对如何解决这个问题有什么想法吗？

Answer 1

浏览一下Chart.js文档，工具提示bgColor似乎不在一个数组中，而只是一个颜色参数。试着把backgroundColor: [ the color ]改成backgroundColor: 'rgba(x,x,x,x)'我没有Chart.js，所以我不能测试，但我想这会让你感觉不错。