Изображение, нарисованное функцией drawImage () скрыть при наведении курсора на столбец гистограммы - PullRequest
Новая
       14

Изображение, нарисованное функцией drawImage () скрыть при наведении курсора на столбец гистограммы

0 голосов
/ 24 мая 2019

Я рисую диаграмму, используя диаграмму JS на холсте.Затем я рисую изображение в верхней части столбца диаграммы.Когда я загружаю страницу, она показывает правильно.Но когда я наведите курсор мыши на столбец диаграммы, изображение скрылось.

Я пробовал с диаграммой JS.Я пытался с Моррисом 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>

Я хочу показать изображение в верхней части столбца.Это будет отзывчивым.

...