Chartist.js与事件

Question

我试图在我正在呈现的图形上添加单击事件。从chart.click到chart.on(“单击”，函数(e){ })。

我想要做的是允许用户选择图形上的点，现在让我选择用户所做的选择。这有可能使用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);
    });
}

Answer 1

是的，这是完全可能的。can将SVG节点呈现到页面上，因此使用像jQuery这样的库，您可以很容易地找到您想要的所有节点，并将事件附加到它们。在要查找的节点中，您可以是特定的或广泛的，只将事件附加到图表上非常特定的节点或元素。

为了完整起见，下面是一个简短的示例，说明如何使用jQuery将记录数据点值的事件附加到控制台上：

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

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

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