Диаграмма Js, наборы данных отображаются и остаются на графике без зависания - PullRequest
Новая
       76

Диаграмма Js, наборы данных отображаются и остаются на графике без зависания

0 голосов
/ 18 июня 2020

У меня есть график на диаграмме Js, и мне нужно, чтобы точки данных на графике оставались на экране без наведения курсора мыши. в настоящее время точки данных появляются, когда я наводю указатель мыши на точки на графике, однако я хотел бы, чтобы они отображались и оставались на экране без необходимости наведения курсора. это все в ванильных javascript и html, без использования каких-либо фреймворков. 

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        datasets: [{
            label: '',
            data: [2, 4, 2, 14, 5, 8, 15, 3, 20, 4, 18, 6, 15, 2, 20, 3, 17, 1],
            backgroundColor: [
                'rgb(191,53,57)',
                'rgb( 245,205,83)',
                'rgb(62,107,154)',
                'rgb(89,160,149)',
                'rgb(124,124,124)',
                'rgb(62,107,154)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 2,
            fill: false,
            lineTension: 0,
            order: 2
        }, {
            label: '(2018-08 To 2018-12-30)',
            data: [1, 7, 2, 8, 1, 2, 7, 2, 7, 2, 6, 3, 7, 1, 8, 3, 7, 2, 6],
            backgroundColor: [
                'rgb(89,160,149)',
                'rgb(89,160,149)',
                'rgb(89,160,149)',
                'rgb(89,160,149)',
                'rgb(89,160,149)',
                'rgb(89,160,149)'
            ],
            borderColor: [
                'rgb(89,160,149)',
            ],
            type: 'line',
            borderWidth: 2,
            fill: false,
            lineTension: 0,
            order: 1
        }, {
            label: '',
            data: [0, 2, 1, 3, 1, 2, 4, 2, 5, 4, 5, 3, 1, 3, 1, 3, 1, 3, 2, 1],
            borderColor: [
                'rgb(192,210,224)',
            ],
            type: 'line',
            borderWidth: 1,
            fill: false,
            lineTension: 0,
            order: 0
        }],
        labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
    },
    options: {
        scales: {
            xAxes: [{
                gridLines: {
                    display: false
                }
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});
...