Как программно вызвать зависание в chartjs - PullRequest
Новая
       8

Как программно вызвать зависание в chartjs

0 голосов
/ 13 декабря 2018

Я хочу установить эффект наведения в ChartJs программно, я хочу видеть оба эффекта hoverBorderWidth и hoverBorderColor.Я знаю, как активировать некоторые всплывающие подсказки, но я не могу применять эффекты при наведении.Например, если у меня есть диаграмма и некоторые ссылки снаружи, я могу инициировать события mouseover для ссылок.Я хочу иметь эффект наведения в ChartJs, как я могу это сделать?

Спасибо за ваш ответ.

1 Ответ

0 голосов
/ 14 декабря 2018

Chart.js прослушивает mousemove события и проверяет, находится ли точка данных в координатах x / y.Если это так, он вызывает поведение «hover» для этой точки.

Заимствуя из тестового кода Chart.js tooltips , я написал фрагмент ниже, чтобы продемонстрировать доступ к правильным свойствам и запусксобытие. 

let c = new Chart($('#chart'), {
  type: 'doughnut',
  data: {
    labels: ['a', 'b', 'c', 'd'],
    datasets: [{
      data: [1, 2, 4, 8],
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  },
  options: {
    maintainAspectRatio: false
  }
});
$('#a').on('click', function() { t(0); });
$('#b').on('click', function() { t(1); });
$('#c').on('click', function() { t(2); });
$('#d').on('click', function() { t(3); });

function t(idx) {
  var meta = c.getDatasetMeta(0),
    rect = c.canvas.getBoundingClientRect(),
    point = meta.data[idx].getCenterPoint(),
    evt = new MouseEvent('mousemove', {
      clientX: rect.left + point.x,
      clientY: rect.top + point.y
    }),
    node = c.canvas;
  node.dispatchEvent(evt);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="a">Hover a</button>
<button id="b">Hover b</button>
<button id="c">Hover c</button>
<button id="d">Hover d</button>
<canvas id="chart"></canvas>
...