Диаграмма JS при наведении всплывающей подсказки не отображает правильный цвет - PullRequest
Новая
       5

Диаграмма JS при наведении всплывающей подсказки не отображает правильный цвет

0 голосов
/ 30 апреля 2020

У меня есть этот график, сделанный с помощью диаграммы JS. До сих пор он работал, но при добавлении дополнительных данных, таких как 2 строки. Подсказка теряет свои цвета. Я говорю о белых полях слева от значений:

enter image description here

Как вы можете видеть, есть две строки. Один для заработка и один для вкладов. Депозит находится внизу, а заработок вверху. Почему белый квадрат белый? Это должно быть так же, как линия?

Вот мой код:

Диаграмма: 

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();

Есть идеи, как решить эту проблему?

1 Ответ

1 голос
/ 30 апреля 2020

Просматривая документацию Chart. js, кажется, что всплывающая подсказка bgColor находится не в массиве, а в виде цветового параметра. Попробуйте изменить backgroundColor: [ the color ] на backgroundColor: 'rgba(x,x,x,x)' У меня нет диаграммы. js, так что я не могу проверить, но я думаю, что это рассортирует вас.

...