我在画布上使用Chart JS绘制了一个图表。然后,在图表列顶部绘制一个图像。当我加载页面时,它显示正确。但是,当我将鼠标悬停在图表列上时,图像消失了。
我尝试使用图表js。我已经尝试过使用morris js。
let myChart = document.getElementById('myChart').getContext('2d');
// Global Options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#777';
let massPopChart = new Chart(myChart, {
type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
data: {
labels: ['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets: [{
label: 'Population',
data: [
6,2,7,3,4,6
],
backgroundColor: '#1d569e',
borderWidth: 1,
borderColor: '#777',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}]
},
options: {
title: {
display: true,
text: 'Largest Cities In Massachusetts',
fontSize: 25
},
legend: {
display: true,
position: 'right',
labels: {
fontColor: '#000'
}
},
layout: {
padding: {
left: 50,right: 0,bottom: 0,top: 0
}
},
tooltips: {
enabled: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
var canvas = document.getElementById('myChart');
var context = canvas.getContext('2d');
var imgPath = 'https://i.imgur.com/t0MRiAf.png';
var imgObj = new Image();
imgObj.src = imgPath;
imgObj.onload = function() {
context.drawImage(imgObj, 0, 0, 100, 100);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class="container">
<canvas id="myChart"></canvas>
</div>
我想在列顶部显示图像。它会做出响应。