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

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

只是针对黄包车传奇和包含文本1st （系列名称.click()的标签上的.click() ）。

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

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

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

希望我能帮到你。