人力车通过自定义按钮删除系列（TOGGLE ACTION）

Question

哟，我正在尝试为 RICKSHAW 图表创建一个自定义按钮。有人可以帮助我吗？

我试过: data.push 通过点击按钮，但那样不会更新图例..然后我试了这个 graph.series[0].disable()和 chart.series[0].disable() 和 $('.rickshaw_legend .line:nth-child(1)').addClass('disabled');

我找到了 rickshaw.toggle code 但不知道如何从那里取出正确的东西并像我的图例类型一样使用它..

所以如果有人对此有任何想法：

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"), 
    width: "", 
    renderer: 'line',
    series: [{
        name: '1st Campaign',
        color: 'rgba(26, 188, 156,0.5)',
        data: [
            { x: 0, y: 600 }, 
            { x: 1, y: 498 }, 
            { x: 2, y: 491 }, 
            { x: 3, y: 480 }, 
            { x: 4, y: 480 },
            { x: 5, y: 475 },
            { x: 6, y: 470 },
            { x: 7, y: 468 }, 
            { x: 8, y: 463 }, 
            { x: 9, y: 452 }, 
            { x: 10, y: 450 }, 
            { x: 11, y: 440 },
            { x: 12, y: 434 },
            { x: 13, y: 290 },
            { x: 14, y: 258 }, 
            { x: 15, y: 253 }, 
            { x: 16, y: 230 }, 
            { x: 17, y: 130 }, 
            { x: 18, y: 130 },
            { x: 19, y: 130 },
            { x: 20, y: 130 },
            { x: 21, y: 130 },
            { x: 22, y: 129 },
            { x: 23, y: 127 },
            { x: 24, y: 125 }, 
            { x: 25, y: 125 }, 
            { x: 26, y: 20 }, 
            { x: 27, y: 10 }, 
            { x: 28, y: 10 },
            { x: 29, y: 10 },
            { x: 30, y: 10 } ]
    }, {
        name: '2th Campaign',
        color: 'rgba(230, 126, 34,.5)',
        data: [
            { x: 0, y: 200 }, 
            { x: 1, y: 198 }, 
            { x: 2, y: 191 }, 
            { x: 3, y: 180 }, 
            { x: 4, y: 180 },
            { x: 5, y: 175 },
            { x: 6, y: 170 },
            { x: 7, y: 168 }, 
            { x: 8, y: 163 }, 
            { x: 9, y: 152 }, 
            { x: 10, y: 150 }, 
            { x: 11, y: 140 },
            { x: 12, y: 134 },
            { x: 13, y: 90 },
            { x: 14, y: 58 }, 
            { x: 15, y: 53 }, 
            { x: 16, y: 30 }, 
            { x: 17, y: 30 }, 
            { x: 18, y: 30 },
            { x: 19, y: 30 },
            { x: 20, y: 30 },
            { x: 21, y: 30 },
            { x: 22, y: 29 },
            { x: 23, y: 27 },
            { x: 24, y: 25 }, 
            { x: 25, y: 25 }, 
            { x: 26, y: 20 }, 
            { x: 27, y: 10 }, 
            { x: 28, y: 10 },
            { x: 29, y: 10 },
            { x: 30, y: 10 } ]
    }, {
        name: '3th Campaign',
        color: 'rgba(231, 76, 60,.5)',
        data: [
            { x: 0, y: 400 }, 
            { x: 1, y: 498 }, 
            { x: 2, y: 491 }, 
            { x: 3, y: 480 }, 
            { x: 4, y: 480 },
            { x: 5, y: 675 },
            { x: 6, y: 670 },
            { x: 7, y: 668 }, 
            { x: 8, y: 663 }, 
            { x: 9, y: 652 }, 
            { x: 10, y: 750 }, 
            { x: 11, y: 740 },
            { x: 12, y: 734 },
            { x: 13, y: 700 },
            { x: 14, y: 708 }, 
            { x: 15, y: 353 }, 
            { x: 16, y: 330 }, 
            { x: 17, y: 330 }, 
            { x: 18, y: 330 },
            { x: 19, y: 330 },
            { x: 20, y: 230 },
            { x: 21, y: 230 },
            { x: 22, y: 229 },
            { x: 23, y: 227 },
            { x: 24, y: 225 }, 
            { x: 25, y: 225 }, 
            { x: 26, y: 520 }, 
            { x: 27, y: 510 }, 
            { x: 28, y: 110 },
            { x: 29, y: 110 },
            { x: 30, y: 10 } ]
    }, {
        name: '4th Campaign',
        color: 'rgba(155, 89, 182,.5)',
        data: [
            { x: 0, y: 1400 }, 
            { x: 1, y: 1498 }, 
            { x: 2, y: 1491 }, 
            { x: 3, y: 1480 }, 
            { x: 4, y: 1480 },
            { x: 5, y: 975 },
            { x: 6, y: 970 },
            { x: 7, y: 968 }, 
            { x: 8, y: 963 }, 
            { x: 9, y: 952 }, 
            { x: 10, y: 850 }, 
            { x: 11, y: 840 },
            { x: 12, y: 834 },
            { x: 13, y: 800 },
            { x: 14, y: 808 }, 
            { x: 15, y: 653 }, 
            { x: 16, y: 630 }, 
            { x: 17, y: 630 }, 
            { x: 18, y: 630 },
            { x: 19, y: 630 },
            { x: 20, y: 530 },
            { x: 21, y: 530 },
            { x: 22, y: 529 },
            { x: 23, y: 527 },
            { x: 24, y: 525 }, 
            { x: 25, y: 525 }, 
            { x: 26, y: 420 }, 
            { x: 27, y: 410 }, 
            { x: 28, y: 410 },
            { x: 29, y: 410 },
            { x: 30, y: 410 } ]
    }]
});

var xAxis = new Rickshaw.Graph.Axis.Time({
    graph: graph
});
xAxis.render();

var yAxis = new Rickshaw.Graph.Axis.Y({
    graph: graph
});
yAxis.render();

var legend = new Rickshaw.Graph.Legend({
    graph: graph,
    element: document.querySelector('#chart')
});

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
    graph: graph,
    legend: legend
});

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph,
    xFormatter: function(x) { return x + " second" },
    yFormatter: function(y) { return Math.floor(y) + " %" }
} );
 
var resize = function() {
  graph.configure({
    width: window.innerWidth * 0,
    height: 220
  });
  graph.render();
}
window.addEventListener('resize', resize); 
resize();

$('#series-1').click(function(event) {
    $('.rickshaw_legend path:nth-child(1)').fadeToggle();
});

#chart {padding-bottom: 20px; margin-left: 15px; width: 95%;}
.rickshaw_graph .x_tick { border-left: 0 !important; }
.rickshaw_graph .y_ticks path {opacity: 0.05;}
g.tick {font-weight: normal;}
g.y_ticks.plain {transform: translate(-3px,8px);}
.rickshaw_graph .y_ticks .tick line {display: none;}
.rickshaw_graph .y_grid .tick {stroke: rgba(0,0,0,0.1) !important; stroke-dasharray: 0 !important;}
.rickshaw_graph .detail .item.active {background: #fff; border: 1px solid #ecf0f1; margin-top: -1px;}
.rickshaw_graph .detail {top: 2px !important; bottom: 20px !important; border-left: 10px solid rgba(0,0,0,0.05); border-right: 10px solid rgba(0,0,0,0.05); background: none !important; width: 1px;}
.rickshaw_graph .detail .x_label {opacity: 1 !important; background: rgba(0,0,0,0.05) !important; border: none !important;}
.rickshaw_graph .x_tick .title {bottom: 5px !important; margin-left: -7px !important; font-size: 10px !important;}
g.tick {opacity: 0.5 !important;}
.rickshaw_graph .detail .dot { margin-top: 6.5px !important;}
.rickshaw_legend .line { overflow: hidden; text-overflow: ellipsis; width: 100%;}
.rickshaw_legend ul {position: relative; margin-top: 20px !important;}
.rickshaw_graph .detail .x_label.left { left: 11px !important;}
.rickshaw_graph .detail .x_label.right { right: 11px !important; }
.rickshaw_legend {background: none !important; color: #000 !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>


<input type="button" id="series-1">
<div id="chart"></div>

这是从 rickshaw.js 复制的用于切换的代码：

Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle");
Rickshaw.Graph.Behavior.Series.Toggle = function(args) {
    this.graph = args.graph;
    this.legend = args.legend;
    var self = this;
    this.addAnchor = function(line) {
        var anchor = document.createElement("a");
        anchor.innerHTML = "&#10004;";
        anchor.classList.add("action");
        line.element.insertBefore(anchor, line.element.firstChild);
        anchor.onclick = function(e) {
            if (line.series.disabled) {
                line.series.enable();
                line.element.classList.remove("disabled")
            } else {
                if (this.graph.series.filter(function(s) {
                    return !s.disabled
                }
                ).length <= 1)
                    return;
                line.series.disable();
                line.element.classList.add("disabled")
            }
            self.graph.update()
        }
        .bind(this);
        var label = line.element.getElementsByTagName("span")[0];
        label.onclick = function(e) {
            var disableAllOtherLines = line.series.disabled;
            if (!disableAllOtherLines) {
                for (var i = 0; i < self.legend.lines.length; i++) {
                    var l = self.legend.lines[i];
                    if (line.series === l.series) {} else if (l.series.disabled) {} else {
                        disableAllOtherLines = true;
                        break
                    }
                }
            }
            if (disableAllOtherLines) {
                line.series.enable();
                line.element.classList.remove("disabled");
                self.legend.lines.forEach(function(l) {
                    if (line.series === l.series) {} else {
                        l.series.disable();
                        l.element.classList.add("disabled")
                    }
                }
                )
            } else {
                self.legend.lines.forEach(function(l) {
                    l.series.enable();
                    l.element.classList.remove("disabled")
                }
                )
            }
            self.graph.update()
        }
    }
    ;
    if (this.legend) {
        var $ = jQuery;
        if (typeof $ != "undefined" && $(this.legend.list).sortable) {
            $(this.legend.list).sortable({
                start: function(event, ui) {
                    ui.item.bind("no.onclick", function(event) {
                        event.preventDefault()
                    }
                    )
                },
                stop: function(event, ui) {
                    setTimeout(function() {
                        ui.item.unbind("no.onclick")
                    }
                    , 250)
                }
            })
        }
        this.legend.lines.forEach(function(l) {
            self.addAnchor(l)
        }
        )
    }
    this._addBehavior = function() {
        this.graph.series.forEach(function(s) {
            s.disable = function() {
                if (self.graph.series.length <= 1) {
                    throw "only one series left"
                }
                s.disabled = true
            }
            ;
            s.enable = function() {
                s.disabled = false
            }
        }
        )
    }
    ;
    this._addBehavior();
    this.updateBehaviour = function() {
        this._addBehavior()
    }
}
;

Answer 1

好的，现在我想通了这种方法..它不是很优雅，但它的工作原理:

代码： $('.rickshaw_legend .label:contains("1th")').siblings('.action').click();

只是指向 人力车传奇 和 .click() 标签上包含文本 1st（系列名称）..

需要： 启用图例（您可以在 CSS display: none;

那是我的代码：.rickshaw_legend ul {display: none;}

{
  name: '1th',
  data: [...]
}

希望我能帮助到那个人。

人力车通过自定义按钮删除系列（TOGGLE ACTION）

Rickshaw remove series by custom button (TOGGLE ACTION)

html

javascript

jquery

rickshaw