Chartist.js 和事件

Question

我正在尝试在我正在渲染的图表上添加点击事件。从 chart.click 到 chart.on('click', function (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

完全有可能，是的。 Chartist 将 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);
    });
});