当动子悬停在条形图列上时,drawImage()函数绘制的图像将隐藏

时间:2019-05-24 11:06:32

标签: javascript php canvas charts responsive

我在画布上使用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>

我想在列顶部显示图像。它会做出响应。

0 个答案:

没有答案