Wie navigieren Sie in QuickInfos, indem Sie auf benutzerdefinierte Schaltflächen außerhalb von Chart.js v2 Canvas klicken?

Question

Diskussion über mobile Benutzerfreundlichkeit unter Chart.js v2-Bibliothek,

Können wir Click-Ereignis auf diese "Punkte" im RadarChart simulieren? Ich frage das, weil, Desktop-Ansicht und Tablet-Ansicht sieht ganz okay für die "Punkte-Punkte" Navigation durch Klicken auf diese Punkte in Diagramm, um externe Interaktivität durch zurückgegebenen Index auszulösen.

ein beliebtes Beispiel kann finden, ist

$('#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 
      } 

});

Aber wenn man in die mobile Ansicht aussehen, unter ansprechbar: true, wird das Diagramm viel kleiner sein von Auto Redimensionierung, somit die Punkte innerhalb Netzdiagramm kann für mobile klicken,
gleiche mit Etiketten sehr klein sein, wird alles kleiner und schwieriger zu klicken.

Könnte es anpassbare Benutzer diese „Punkte zu sammeln“ zu lassen, navigieren (zunächst ausgelöst durch Klick auf Leinwand manuell)

kann es indirekt durch extern „zurück“, „next“ Navigationstasten auf auslösen wird linke und rechte Seite des Radchart wie diese Slider/Karussell Navigationstasten?

Answer 1

Sie können dies tun, indem Sie das Diagramm Beispiel Verfahren unter Verwendung von

---

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)); 

Wenn Sie diese Funktionalität wollen nur für kleine Bildschirme, nur eine Bildschirmgröße Scheck an den oben hinzufügen Chart-Click-Handler und blende die Schaltflächen und Labels mit Medienabfragen aus.

---

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