JS Гистограмма наведите курсор на всплывающую подсказку для отображения предыдущих значений - PullRequest
Новая
       18

JS Гистограмма наведите курсор на всплывающую подсказку для отображения предыдущих значений

0 голосов
/ 14 января 2019

При этом я использовал гистограмму Java Script. Для отображения диаграммы сначала загрузите данные в массив «qtyArray», а объект диаграммы - в «qtyBarChart».

функция loadData 

function loadData (category,brand)
{    
  var qtyBarChart = document.getElementById("minChart");
  var qtyArray = new Array();

  sel_category = category;

      $.ajax({
            url : "{{route('getCatMinMax')}}",
            method: "GET",
            dataType:"json",
            data :{category:sel_category},
            success: function(data)
            {

               $.each(data, function (i, value) 
               {                     
                qtyArray[i] = [value.min_qty, value.max_qty, value.actualQty];

                drawQtyChart(qtyBarChart, qtyArray);

               }); 

            }
      });

}

После этого я рисую диаграмму с помощью функции drawQtyChart (qtyBarChart, qtyArray), передавая связанные параметры. 

function drawQtyChart(objChart,values)
{
    var i;
    for ( i = 0; i <values.length; i++) 
    {
        new Chart(objChart, {
            type: 'bar',
            data: {
                labels: ["Min","Max","Actual"],
                datasets: [{
                    label: 'Qty Min/Max',
                    data: values[i],
                    backgroundColor: [
                        'rgba(160,49,170)',
                        'rgba(160,49,170)',
                        'rgba(255,148,29)'
                    ],
                    borderColor: [
                        'rgba(160,49,170',
                        'rgba(160,49,170)',
                        'rgba(255,148,29)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                 legend: {
                    display: false,
                    labels: {
                        fontColor: 'rgb(255, 99, 132)'
                    }
                  },
                  tooltips: {
                      callbacks: {
                          label: function(tooltipItem, data) {
                              var label = data.datasets[tooltipItem.datasetIndex].label || '';

                              if (label) {
                                  label += ': ';
                              }
                              label += Math.round(tooltipItem.yLabel * 100) / 100;
                              return label;
                          }
                      }
                  },
                  scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            callback: function(value, index, values) {
                                          if(parseInt(value) >= 1000){
                                            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                          } else {
                                            return value;
                                          }
                                        }
                        }
                    }]
                  }

            }
        });  
    }
}

Но, к сожалению, всплывающая подсказка отображается не всегда, ее отображает только пылесос мыши. Другая проблема заключается в том, что я загружаю другую диаграмму с другими данными с помощью qtyArray, при наведении курсора мыши отображается ранее загруженная диаграмма с помощью qtyArray с подсказками. Помогите мне решить эту проблему, иначе, если на графике всегда можно навести указатель мыши на подсказку, лучше решить эту проблему.

...