Как всплывать всплывающие подсказки всплывающих подсказок, нажимая пользовательские кнопки вне Chart.js v2 canvas?

Question

Обсуждение возможности мобильных устройств в библиотеке Chart.js v2,

Можем ли мы имитировать событие кликов на этих «баллах» в RadarChart? Я прошу об этом, потому что Вид на рабочий стол и планшетный вид выглядит вполне нормально для навигации по точкам очков, нажимая на эти точки в диаграмме, чтобы вызвать внешнюю интерактивность по возвращенному индексу.

популярный пример можно найти в

$('#ChartV2').click(function(e) { 
      var activePoints = myRadarChart.getElementsAtEvent(e);     
      var firstPoint = activePoints[0]; 
      console.log(firstPoint); 
      if (firstPoint !== undefined){ 
       alert(firstPoint._index); 
       //so then we can use 
       // index to hide show results in the html elements out of canvas , etc 
      } 

});

Но если вы посмотрите на мобильное зрение, под отзывчивым: верно, то диаграммой будет намного меньше, авто изменения размеров, , таким образом, точки внутри radarchart могут быть очень маленькими для мобильной мыши,
же с этикетками, все будет быть меньше и сложнее нажать.

Может быть настраиваемым, чтобы позволить пользователю перемещаться теми «очки» (первоначально запускаемого щелчком на холсте вручную)

это может быть косвенно вызвать путь внешних «пред», «Next» кнопка навигации на левой и правой части Radarchart , таких как кнопки навигации слайдера/карусели?

Answer 1

Вы можете сделать это, используя методы экземпляра диаграммы

---

Script

var myRadarChart = new Chart(ctx, { 
    ... 

(function (chart) { 
    var helpers = Chart.helpers; 

    var currentDatasetIndex; 
    var currentPointIndex; 

    $('#ChartV2').click(function (e) { 
     // try getting an element close to the click 
     var activePoints = chart.getElementAtEvent(e); 
     var firstPoint = activePoints[0]; 

     if (firstPoint === undefined) { 
      // otherwise pick the first visible element 
      helpers.each(chart.data.datasets, function (dataset, datasetIndex) { 
       if (firstPoint === undefined && this.isDatasetVisible(datasetIndex)) { 
        var meta = this.getDatasetMeta(datasetIndex); 
        firstPoint = meta.data[0]; 
       } 
      }, chart); 
     } 

     // need this check as we may have 0 visible elements 
     if (firstPoint !== undefined) { 
      currentDatasetIndex = firstPoint._datasetIndex; 
      currentPointIndex = firstPoint._index; 
      $('#prev, #next').removeAttr('disabled'); 
      updateView(); 
     } 
    }); 

    $('#prev').click(function() { 
     // we add (n - 1) and do a modulo n to move one step back in an n element array. 
     if (currentPointIndex === 0) 
      currentDatasetIndex = (currentDatasetIndex + chart.data.datasets.length - 1) % chart.data.datasets.length; 
     currentPointIndex = (currentPointIndex + chart.data.labels.length - 1) % chart.data.labels.length; 
     updateView(); 
    }); 

    $('#next').click(function() { 
     currentPointIndex = (currentPointIndex + 1) % chart.data.labels.length; 
     if (currentPointIndex === 0) 
      currentDatasetIndex = (currentDatasetIndex + 1) % chart.data.datasets.length; 
     updateView(); 
    }); 


    // this (hoisted) function will update the text and show the tooltip 
    function updateView() { 
     $('#value').text(
      chart.data.datasets[currentDatasetIndex].label + ' : ' + 
      chart.data.labels[currentPointIndex] + ' : ' + 
      chart.data.datasets[currentDatasetIndex].data[currentPointIndex]); 

     // we mess around with an internal variable here - this may not work with a new version 
     chart.tooltip._active = [ chart.getDatasetMeta(currentDatasetIndex).data[currentPointIndex] ]; 
     chart.tooltip.update(); 
     chart.render(); 
    } 

}(myRadarChart)); 

Если вы хотите эту функцию только для маленьких экранов, просто добавить проверку размера экрана к вышесказанному обработчик щелчка диаграммы и скрыть кнопки и ярлык, используя медиа-запросы.

---

Fiddle - http://jsfiddle.net/uxqL6rwf/