Chartist.js 和事件

Question

我正在尝试在我正在渲染的图表上添加点击事件。从 chart.click 到 chart.on('click', 函数 (e){ }).

我想做的是让用户在图表上显示 select 点，而我现在可以显示用户制作的 select 离子。使用 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);
});

但是，如果要确保数据点在页面上，则应确保仅在创建或绘制图表时附加事件，这可以由 "created" 或 "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);
    });
});

Chartist.js 和事件

Chartist.js and events

chartist.js