2016-11-29 2 views
3

내가 렌더링하고있는 그래프에 클릭 이벤트를 추가하려고합니다. chart.click에서 chart.on으로 ('click', function (e) {}).Chartist.js 및 이벤트

내가하려는 것은 사용자가 그래프에서 점을 선택할 수있게 해주는 것이며, 이제는 사용자가 어떤 선택을했는지 표시 할 수 있습니다. 그것은 chartist.js를 사용하여 가능합니까?

나는 문서를 읽어 : CHARTIST.JS

내 코드 : 그것은 전적으로 가능하다

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

답변

3

을, 예. Chartist는 SVG 노드를 페이지에 렌더링하므로 jQuery와 같은 라이브러리를 사용하면 원하는 모든 노드를 쉽게 찾고 이벤트를 연결할 수 있습니다. 찾고자하는 노드에서 특정 노드 또는 특정 노드로 이벤트를 첨부 할 수 있습니다.

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

하는 당신은, 그러나, 확인해야합니다 :

완성도를 위해서

, 여기에 jQuery를 사용하여 콘솔에 클릭하면 데이터 포인트의 값을 기록 이벤트를 연결하는 방법에 대한 간단한 예입니다

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

chart.on ("차트를 만들거나 그려 때 데이터 포인트는"창조 "또는"그리기 "이벤트에 의해 트리거 될 수있는 페이지에 있는지 확인하려면 이벤트에만 부착 만든 ", 함수 (데이터) { $ ('.ct-point'). (function() { var val = $ (this) .attr ("ct : value"); Handlr.confirm ({message : val}); }}); }}); 이렇게하면됩니다. –