Chartist.js und Ereignisse

Question

Ich versuche, Click-Ereignisse in den Graphen hinzuzufügen, die ich rendere. Von chart.click zu chart.on ('click', function (e) {}).

Was ich versuche zu tun ist, erlauben Sie dem Benutzer, Punkte in der Grafik und für mich zu wählen, welche Auswahl der Benutzer getroffen hat. Ist das überhaupt möglich mit chartist.js?

Ich las durch die Dokumentation: CHARTIST.JS

Mein Code:

if (item.GraphType.Description == "Line") { 
    var chart = new Chartist.Line(
     container[0], 
     { 
      labels: d.Labels, 
      series: d.SeriesData 
     }, 
     { 
      axisY: { 
       offset: 60 
      } 
     } 
    ); 
    chart.click(function (e) { 
     console.log(e); 
    }); 
} 

Answer 1

Es ist durchaus möglich, ja. Chartist rendert SVG-Knoten auf der Seite, also können Sie mit einer Bibliothek wie jQuery ganz einfach alle gewünschten Knoten finden und ihnen Ereignisse zuordnen. Sie können in den Knoten, die Sie suchen, so spezifisch oder breit sein, dass nur Ereignisse an sehr spezifische Knoten oder Elemente im Diagramm angehängt werden.

Der Vollständigkeit halber ist hier ein kurzes Beispiel dafür, wie Ereignisse anhängen, die den Wert eines Datenpunktes anmelden, wenn auf der Konsole mit jQuery geklickt auf:

$('.ct-chart-line .ct-point').click(function() { 
    var val = $(this).attr("ct:value"); 
    console.log(val); 
}); 

Sie sollten jedoch sicherstellen, dass die Ereignisse anhängen nur dann, wenn das Diagramm erstellt oder gezogen wird, wenn Sie die Datenpunkte sind auf der Seite gewährleisten wollen, die von den „erstellt“ oder „ziehen“ Ereignisse ausgelöst werden können:

var chart = new Chartist.Line(...); 
// attach an event handler to the "created" event of the chart: 
chart.on("created", function() { 
    // attach the necessary events to the nodes: 
    $('.ct-chart-line .ct-point').click(function() { 
     var val = $(this).attr("ct:value"); 
     console.log(val); 
    }); 
});