JS条形图鼠标悬停在工具提示上可显示先前的值

时间:2019-01-14 07:59:28

标签: javascript json laravel-5 tooltip bar-chart

在此,我使用了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'的工具提示显示先前加载的图表。帮助我解决此问题,否则,如果始终将鼠标悬停在工具提示上,则最好解决此问题。

0 个答案:

没有答案