我已经设置了折线图,现在想修改工具提示。现在,我被困于使工具提示覆盖附近的html容器,如下所示。
我已经尝试过更改html容器的Z-Index和工具提示选项fullWidth: true,
都没有成功。
任何想法可能出在哪里?
注意:出于多种原因,我不想增加画布高度。
HTML(如果需要)
<div class="thirdRow">
<div class="LatestResults">
<p>Latest Results:</p>
</div>
<div class="latestResultsWrapper">
<canvas width="1500" height="30" id="lineChartResults"></canvas>
</div>
</div>
画布JS:
var ctx3 = $("#lineChartResults");
var data = {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17",
"18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34" ,
"35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46"], //create n label per datapackage
datasets: [{
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // Specify the data values array
borderColor: '#2E1A6D',
fill: 'none',
borderWidth: 2,
pointBackgroundColor: '#2E1A6D',
pointRadius: 6,
showLine: false,
pointHoverRadius: 9.5,
pointHoverBackgroundColor: '#2487BC',
pointHoverBorderColor: '#2487BC',
}]
};
var options = {
scaleShowGridLines: false,
tooltips: {
backgroundColor: '#5F5F5F',
fullWidth: true,
},
layout: {
padding: {
left: 10,
right: 10,
bottom: 4,
}
},
legend: {
display: false
},
tooltip: {
display: false
},
scales: {
xAxes: [{
display: false,
ticks: {
min: -1,
max: 48,
stepSize: 1,
}
}],
yAxes: [{
display: false,
ticks: {
min: 0,
max: 2,
stepSize: 1,
}
}],
}
};
var lineChartResults = new Chart(ctx3, {
type: 'line',
data: data,
options: options
});