C3.js添加其他信息以打勾

时间:2017-08-16 13:27:56

标签: javascript angularjs c3.js

我有刻度的格式:

               tick: {
                    fit: true,
                    multiline: false,
                    outer: false,
                    format: function (x) {
                        var value = this.api.categories()[x];
                        if(value.length > 5)
                            return value.substring(0,5)+"...";
                        else
                            return value;
                    }
                },

value - 唯一属性。但是现在 - 我应该用5个符号来削减它。

我点击了勾号:

_.each(this.chart.element.querySelectorAll('svg g.c3-axis-x .tick text tspan'), (el) => {
            el.onclick = (e) => this.someFunction(e)
        })

在someFunction()中 - 我想获得唯一属性来获取当前tick的数据。

我最早得到像angular.element(e.target).text()这样的属性,但它可以包含сropped属性。我如何获得当前指数?或者别的什么来获得全文

1 个答案:

答案 0 :(得分:0)

从c3图表中的元素中获取数据/索引最好通过d3完成,因为这是c3首先用于构建它们的内容。是否使用角度中断这个功能我不知道,因为我不使用它

值得一试的是,如果你看看之前的q(C3 js : large axis label),那么改变我的部分答案就会给出onrendered函数的点击功能:

onrendered: function () {
    var self = this;

    d3.select(this.config.bindto)
        .selectAll(".c3-axis-x .tick text")
        .on ("click", function(d) {
           console.log ("data val", d, "gives us ", self.api.categories()[d])
            // then do what you want
        })
}

http://jsfiddle.net/05hsk6yh/3/