人力车通过自定义按钮删除系列（切换动作）

Question

Yo, i'm trying to create a custom button for RICKSHAW chart.. Is here someone who can help me with that ?

I tried : data.push by click on the button, but that way doesn't update the legend.. Then i tried this one graph.series[0].disable() and chart.series[0].disable() and $('.rickshaw_legend .line:nth-child(1)').addClass('disabled');

I found the rickshaw.toggle code but don't have any idea how to take the right thing out of there and use it like my legend type..

So if someone have any idea with that:

 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> 

Here is a copied code from rickshaw.js for toggle:

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 = "✔";
        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

Ok, for now i figured out with this way.. it's not a really elegant, but it's works :

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

Just a directed to rickshaw legend and .click() on the label that contains text 1st (name of series)..

NEED: Enable the legend ( and u can set in CSS display: none;

Thats my code : .rickshaw_legend ul {display: none;}

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

Hope, that i help to someone with that.