График. js Почему мои эффекты при наведении не работают? - PullRequest
Новая
       12

График. js Почему мои эффекты при наведении не работают?

0 голосов
/ 18 апреля 2020

У меня есть небольшая проблема, у меня есть небольшая диаграмма с 1440 точками данных, и если я отображаю диаграмму в полноэкранном режиме, диаграмма не показывает никаких эффектов при наведении, это также включает всплывающие подсказки. Если я посмотрю на диаграмму с открытыми инструментами разработки в chrome, все будет работать нормально ... Вот мой код: 

var chart = new Chart(
  ctx,
  {
    type: 'line',
    data: {
      datasets: [{
        label: 'Temperatur',
        borderColor: '#f00',
        backgroundColor: '#ff000033',
        data: [],
      }]
    },
    options: {
      scales: {
          xAxes: [{
              type: 'time',
              time: {
                  unit: 'minute',
                  displayFormats: {
                      minute: 'HH:mm'
                  }
              }
          },
          {
              type: 'time',
              time: {
                  unit: 'day',
                  displayFormats: {
                      minute: 'HH:mm'
                  }
              }
          }],
          yAxes: [{
            ticks:{
              beginAtZero: true
            }
          }]
      },
      backgroundColor: '#011627',
      elements: {
          point:{
              radius: 0,
              hitRadius: 5
          }
      }
    }
  }
);

Если у вас есть идеи, как я могу заставить работать эффекты наведения, дай мне знать! Спасибо

Редактировать:

Я кое-что понял. в одном указанном разрешении c диаграмма постоянно обновляет разрешение диаграмм (1471x735), я пробовал разные разрешения, и все они отлично работают ..

1 Ответ

0 голосов
/ 19 апреля 2020

Эффекты пылесоса в вашей диаграмме работают нормально, возможно, вы не пылесосили ни в одной точке, потому что они не видны. Я сделал их видимыми, комментируя options.elements.point.radius.

Пожалуйста, проверьте ваш исправленный код ниже: 

var chart = new Chart('myChart', {
    type: 'line',
    data: {
      datasets: [{
        label: 'Temperatur',
        borderColor: '#f00',
        backgroundColor: '#ff000033',
        data: [
          { x: "2018-12-07 08:45:17", y: 12 },
          { x: "2018-12-07 09:30:17", y: 19 },
          { x: "2018-12-07 10:15:16", y: 7 },
          { x: "2018-12-07 11:00:17", y: 15 },
          { x: "2018-12-07 12:15:16", y: 10 }
        ]
      }]
    },
    options: {
      scales: {
        xAxes: [{
            type: 'time',
            time: {
              unit: 'minute',
              displayFormats: {
                minute: 'HH:mm'
              }
            }
          },
          {
            type: 'time',
            time: {
              unit: 'day',
              displayFormats: {
                minute: 'HH:mm'
              }
            }
          }
        ],
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      backgroundColor: '#011627',
      elements: {
        point: {
          // radius: 0,
          hitRadius: 5
        }
      }
    }
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>
...