Dygraphs에서 수직선 수를 제어하는 ​​방법은 무엇입니까?

Question

이것은 관련이 있습니다 https://github.com/danvk/dygraphs/blob/master/tests/hairlines.html

저는 질문이 있습니다, 그래프에 최대 2 개의 헤어 라인을 그려보고 싶습니다. 어떻게하면 2 줄만 그리도록 사용자를 제한 할 수 있습니까?

API에서 지원됩니까? 세부 사항은 어디서 구할 수 있습니까? 지원되지 않는 경우 어떻게 할 수 있습니까? 어떤 생각.

감사합니다.

Answer 1

hairlineCreated 이벤트를 사용하면 헤어 라인의 양을 제한 할 수 있습니다.

$(hairlines).on({ 
    'hairlineCreated': function() { 
    var maxHairlines = 2; 
    var h = hairlines.get(); 
    if (h.length > maxHairlines) { 
     h.splice(0, h.length-maxHairlines); 
     hairlines.set(h); 
    } 
    } 
); 

확인 구현을위한 다음 코드 :

var last_t = 0; 
 
var data = []; 
 
var fn = function(t) { 
 
    return Math.sin(Math.PI/180 * t * 4); 
 
}; 
 
for (; last_t < 200; last_t++) { 
 
    data.push([last_t, fn(last_t)]); 
 
} 
 

 
hairlines = new Dygraph.Plugins.Hairlines({ 
 
    divFiller: function(div, data) { 
 
    // This behavior is identical to what you'd get if you didn't set 
 
    // this option. It illustrates how to write a 'divFiller'. 
 
    var html = Dygraph.Plugins.Legend.generateLegendHTML(
 
     data.dygraph, data.hairline.xval, data.points, 10); 
 
    $('.hairline-legend', div).html(html); 
 
    $(div).data({ 
 
     xval: data.hairline.xval 
 
    }); // see .hover() below. 
 
    } 
 
}); 
 
g = new Dygraph(
 
    document.getElementById("demodiv"), 
 
    data, { 
 
    labelsDiv: document.getElementById('status'), 
 
    labelsSeparateLines: true, 
 
    legend: 'always', 
 
    labels: ['Time', 'Value'], 
 

 
    axes: { 
 
     x: { 
 
     valueFormatter: function(val) { 
 
      return val.toFixed(2); 
 
     } 
 
     }, 
 
     y: { 
 
     pixelsPerLabel: 50 
 
     } 
 
    }, 
 

 
    // Set the plug-ins in the options. 
 
    plugins: [hairlines] 
 
    } 
 
); 
 

 
var shouldUpdate = true; 
 
var update = function() { 
 
    if (!shouldUpdate) return; 
 
    data.push([last_t, fn(last_t)]); 
 
    last_t++; 
 
    data.splice(0, 1); 
 
    g.updateOptions({ 
 
    file: data 
 
    }); 
 
}; 
 
window.setInterval(update, 1000); 
 

 
// Select/Deselect hairlines on click. 
 
$(document).on('click', '.hairline-info', function() { 
 
    console.log('click'); 
 
    var xval = $(this).data('xval'); 
 
    var hs = hairlines.get(); 
 
    for (var i = 0; i < hs.length; i++) { 
 
    if (hs[i].xval == xval) { 
 
     hs[i].selected = !hs[i].selected; 
 
    } 
 
    } 
 
    hairlines.set(hs); 
 
}); 
 

 
// Demonstration of how to use various other event listeners 
 

 

 
$(hairlines).on({ 
 
    'hairlineMoved': function(e, data) { 
 
    // console.log('hairline moved from', data.oldXVal, ' to ', data.newXVal); 
 
    }, 
 
    'hairlineCreated': function(e, data) { 
 
    var maxHairlines = 2; 
 
    h = hairlines.get(); 
 
    if (h.length > maxHairlines) { 
 
     h.splice(0, h.length - maxHairlines); 
 
     hairlines.set(h); 
 
    } 
 
    }, 
 
    'hairlineDeleted': function(e, data) { 
 
    console.log('hairline deleted at ', data.xval); 
 
    } 
 
});

#demodiv { 
 
    position: absolute; 
 
    left: 10px; 
 
    right: 200px; 
 
    height: 400px; 
 
    display: inline-block; 
 
} 
 
#status { 
 
    position: absolute; 
 
    right: 10px; 
 
    width: 180px; 
 
    height: 400px; 
 
    display: inline-block; 
 
} 
 
#controls { 
 
    position: absolute; 
 
    left: 10px; 
 
    margin-top: 420px; 
 
} 
 
/* This style & the next show how you can customize the appearance of the 
 
     hairlines */ 
 

 
.hairline-info { 
 
    border: 1px solid black; 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
    display: table; 
 
    /* shrink to fit */ 
 
    min-width: 100px; 
 
    z-index: 10; 
 
    /* should appear on top of the chart */ 
 
    padding: 3px; 
 
    background: white; 
 
    font-size: 14px; 
 
    cursor: move; 
 
} 
 
.dygraph-hairline { 
 
    /* border-right-style: dotted !important; */ 
 
    cursor: move; 
 
} 
 
.dygraph-hairline.selected div { 
 
    left: 2px !important; 
 
    width: 2px !important; 
 
} 
 
.hairline-info.selected { 
 
    border: 2px solid black; 
 
    padding: 2px; 
 
} 
 
.annotation-info { 
 
    background: white; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    padding: 4px; 
 
    display: table; 
 
    /* shrink to fit */ 
 
    box-shadow: 0 0 4px gray; 
 
    cursor: move; 
 
    min-width: 120px; 
 
    /* prevents squishing at the right edge of the chart */ 
 
} 
 
.annotation-info.editable { 
 
    min-width: 180px; 
 
    /* prevents squishing at the right edge of the chart */ 
 
} 
 
.dygraph-annotation-line { 
 
    box-shadow: 0 0 4px gray; 
 
}

<link href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
 
<script type="text/javascript" src="http://dygraphs.com/extras/hairlines.js"></script> 
 

 
<h2>Hairlines Demo</h2> 
 

 
<p>Click the chart to add a hairline. Drag the hairline to move it.</p> 
 

 
<!-- 
 
    The "info box" for each hairline is based on this template. 
 
    Customize it as you wish. The .hairline-legend element will be populated 
 
    with data about the current points and the .hairline-kill-button element 
 
    will remove the hairline when clicked. Everything else will be untouched. 
 
    --> 
 
<div id="hairline-template" class="hairline-info" style="display:none"> 
 
    <button class='hairline-kill-button'>Kill</button> 
 
    <div class='hairline-legend'></div> 
 
</div> 
 

 
<div id="demodiv"></div> 
 
<div id="status"></div> 
 
</div>