Chartist.js et événements

Question

Je suis en train d'ajouter des événements de clic sur les graphiques que je suis rendu. De chart.click à chart.on ('click', function (e) {}).

Ce que je suis en train de faire est de permettre à l'utilisateur de sélectionner des points sur le graphique et pour moi maintenant ce que l'utilisateur fait sélections. Est-ce possible du tout en utilisant chartist.js?

J'ai lu la documentation: CHARTIST.JS

Mon 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

Il est tout à fait possible, oui. Chartist rend les nœuds SVG à la page, donc en utilisant une bibliothèque comme jQuery vous pouvez facilement trouver tous les nœuds que vous voulez et leur attacher des événements. Vous pouvez être aussi spécifique ou large dans les nœuds que vous recherchez que pour attacher des événements à des nœuds ou des éléments très spécifiques sur le graphique.

Par souci d'exhaustivité, voici un court exemple de la façon de joindre les événements qui se connectent la valeur d'un point de données lorsque vous cliquez dessus sur la console en utilisant jQuery:

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

Vous devriez cependant, assurez-vous que les événements se fixent uniquement lorsque le graphique est créé ou si vous voulez dessiné pour assurer les points de données sont sur la page, qui peut être déclenchée par les événements « créés » ou « tirer »:

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