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