javascript - ChartJS 悬停工具提示颜色未显示正确的颜色

Question

我用 ChartJS 制作了这张图表。到目前为止我已经让它工作了，但是，当添加更多数据(例如 2 行)时......工具提示会失去它的颜色。我说的是值左侧的白框:

如您所见，有 2 行。一份用于收入，一份用于存款。存款是最底层的， yield 是最上面的。为什么白色的方 block 是白色的？它应该与该行相同？

这是我的代码:

图表:

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，所以我可以'测试，但我想这会让你分类。