Chartist.js and events

Question

我正在尝试在我呈现的图表上添加单击事件。从Chart.Click到Chart.on（'click'，函数（e）{}）。

我要做的是允许用户在图表上选择点，而现在我可以选择用户做出的选择。是否可以使用Chartist.js？

我读了文档：ctartist.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);
    });
}

Answer 1

是完全可能的。Chartist将SVG节点渲染到页面，因此使用诸如jQuery之类的库您可以轻松找到所需的所有节点并将事件附加到它们。您可以在寻找仅将事件附加到图表上非常特定的节点或元素的节点中是特定的或广泛的。

为了完整的清晰，这是一个简短的示例，说明如何使用jQuery单击到控制台时记录数据值的事件：

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

但是，如果要确保数据点在页面上，则应确保仅在创建图表或绘制图表时附加事件，这可以由"创建"或" draw"事件触发：

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