Question

我用ChartJS制作了这张图表。到目前为止，我已经可以使用它了，但是，当添加更多数据（例如2行）时。工具提示会使其颜色松动。我说的是值左侧的白框：

您会看到有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，因此无法测试，但是我认为可以对您进行排序。

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

1 个答案: