Question

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

我尝试了：data.push点击了按钮，但这种方式并没有更新图例..然后我尝试了这个graph.series[0].disable()和{{ 1}}和chart.series[0].disable()

我找到了$('.rickshaw_legend .line:nth-child(1)').addClass('disabled');但又不知道如何从那里拿出正确的东西并像我的传奇类型一样使用它。

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

＆＃13;

rickshaw.toggle code

＆＃13;

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();
});

＆＃13;

#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;}

＆＃13;

以下是来自<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

Answer 1

好的，现在我用这种方式想出来......它不是很优雅，但它的确有效：

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

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

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

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

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

希望，我能帮助那个人。

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

1 个答案: