Wie steuert man die Anzahl der vertikalen Linien in Dygraphs?

Question

Dies ist in Bezug auf

Ich habe eine Frage, ich möchte maximal 2 Haarlinien auf Grafik zeichnen. Wie kann ich den Benutzer darauf beschränken, nur zwei Zeilen zu zeichnen?

Wird es in der API unterstützt? Woher bekomme ich die Details? Wenn nicht unterstützt, wie kann ich das tun? Irgendeine Idee.

Dank und Grüße.

Answer 1

Sie können das Ereignis hairlineCreated verwenden, um die Anzahl der Haarlinien zu begrenzen. Zum Beispiel entfernt die folgenden Ausschnitt vorher Haarlinien hinzugefügt, wenn die Gesamtmenge der Haarlinien mehr als zwei:

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

Überprüfen Sie den folgenden Ausschnitt für die Implementierung:

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>