单击人力车图的选项

onClick Option for Rickshaw Charting

本文关键字：选项 人力车 单击      更新时间：2023-09-26

我想知道数据点上的onclick事件是否实际上有开箱即用的支持，或者我必须修改库才能使其工作。我浏览了源代码的某些部分，没有看到任何允许绑定自定义单击操作的内容。他们网站上的教程也没有显示此选项 （http://code.shutterstock.com/rickshaw/）。

任何帮助都是感激的。我目前正在评估 flot、人力车和 flotr2。到目前为止，它们都不满足所有要求，我很惊讶除了 flot 之外，其他库中没有自定义 onClick 事件的选项。我看到有些人为 flotr2 添加了一些类似黑客的方法，但它非常特定于条形图。

这有点黑客，但我有同样的要求。我已经挂接了一个 HoverDetail 对象，所以我挂接到了 HoverDetail 对象的 onShow 事件来存储所选项目的 x 标签的值。

（这是在一个角度应用程序中，所以这就是我在作用域上设置变量的原因）

var hoverDetail = new Rickshaw.Graph.HoverDetail({
    onShow: function(event){
        scope.data.activeDate = $(".x_label").text();
    },
    graph: graph
});

然后，我将普通的单击处理程序连接到图形，并访问其中的 onShow 处理程序存储的变量。

有关如何使用 HoverDetail 对象和其他人力车构造的详细信息，请查看此截屏视频：http://tagtree.tv/d3-with-rickshaw-and-angular

我从HoverDetail中得出了这个，到目前为止它似乎有效：

Rickshaw.namespace('Rickshaw.Graph.ClickDetail');
Rickshaw.Graph.ClickDetail = Rickshaw.Class.create({
    initialize: function (args) {
        this.graph = args.graph;
        this.clickHandler = args.clickHandler || function(data){};
        this.lastEvent = null;
        this._addListeners();
    },
    update: function (e) {
        e = e || this.lastEvent;
        if (!e) return;
        this.lastEvent = e;
        if (!e.target.nodeName.match(/^(path|svg|rect|circle)$/)) return;
        var graph = this.graph;
        var eventX = e.offsetX || e.layerX;
        var eventY = e.offsetY || e.layerY;
        var j = 0;
        var points = [];
        var nearestPoint;
        var nearestValue;
        this.graph.series.active().forEach(function (series) {
            var data = this.graph.stackedData[j++];
            if (!data.length)
                return;
            var domainX = graph.x.invert(eventX);
            var domainIndexScale = d3.scale.linear()
                .domain([data[0].x, data.slice(-1)[0].x])
                .range([0, data.length - 1]);
            var approximateIndex = Math.round(domainIndexScale(domainX));
            if (approximateIndex == data.length - 1) approximateIndex--;
            var dataIndex = Math.min(approximateIndex || 0, data.length - 1);
            for (var i = approximateIndex; i < data.length - 1;) {
                if (!data[i] || !data[i + 1]) break;
                if (data[i].x <= domainX && data[i + 1].x > domainX) {
                    dataIndex = Math.abs(domainX - data[i].x) < Math.abs(domainX - data[i + 1].x) ? i : i + 1;
                    break;
                }
                if (data[i + 1].x <= domainX) {
                    i++
                } else {
                    i--
                }
            }
            if (dataIndex < 0) dataIndex = 0;
            var value = data[dataIndex];
            var distance = Math.sqrt(
                Math.pow(Math.abs(graph.x(value.x) - eventX), 2) +
                Math.pow(Math.abs(graph.y(value.y + value.y0) - eventY), 2)
            );
            if (!nearestPoint || distance < nearestPoint.distance) {
                nearestValue = value;
            }
        }, this);
        if(nearestValue){
            this.clickHandler(nearestValue);
        }
    },
    render: function (args) {
        // Do nothing
    },
    _addListeners: function () {
        this.graph.element.addEventListener(
            'click',
            function (e) {
                this.update(e);
            }.bind(this),
            false
        );
    }
});

用法如下：

 new Rickshaw.Graph.ClickDetail({
            graph: graph,
            clickHandler: function(value){
                alert(value.x + ' ' + value.y);
            }
        });

你试过HighCharts吗.js？它是一个JavaScript库，用于创建不折不扣的图表和图形。

http://www.highcharts.com/

您可以自定义 onclick 事件以使用 HighCharts 调用 JavaScript 函数。

$('#chart').on('click', 'svg rect' ,function() {
        x = $(this)[0].__data__.x; //The value of x
        y = $(this)[0].__data__.y; //The value of y
        });

久经考验的;)

相关文章：