sparkline

Sparkline

Generieren Sie SVG-Sparklines mit JavaScript ohne externe Abhängigkeit.

Installation

Diese Bibliothek ist als NPM-Paket verfügbar. Um es zu installieren, verwenden Sie den folgenden Befehl:

 npm install @fnando/sparkline --save

Wenn Sie Yarn verwenden (und das sollten Sie tun):

 yarn add @fnando/sparkline

Sie müssen sparkline.sparkline(svg, values, options) direkt aufrufen, wenn Sie das Skript laden, ohne es zu kompilieren (z. B. Webpack). Ansonsten können Sie import sparkline from "@fnando/sparkline"; .

API

sparkline(svg, values, options = {})

• svg : Dies ist eine <svg> -Referenz, die drei erforderliche Attribute ( width , height und stroke-width ) enthalten muss. Diese Attribute werden zur Berechnung der Zeichenfläche verwendet.
• values : Sie können entweder ein Array von Zahlen oder ein Array von Objekten bereitstellen, die auf .value reagieren. Wenn Sie eine andere Datenstruktur haben, sehen Sie sich options.fetch an.
• options : Mit diesem optionalen Argument können Sie die Sparkline weiter anpassen. Die verfügbaren Optionen sind:
  • fetch : Verwenden Sie diese Funktion, um den Wert zurückzugeben, wenn Sie eine andere Datenstruktur haben, die von Sparkline nicht nativ unterstützt wird.
  • onmousemove : Durch Festlegen dieser Rückruffunktion aktivieren Sie den interaktiven Modus (es sei denn, Sie setzen options.interactive auf false ). Die Rückrufsignatur lautet callback(event, datapoint) , wobei datapoint ein Objekt ist, das den Wert, x/y-Koordinaten und den Elementindex enthält.
  • onmouseout : Diese Rückruffunktion wird jedes Mal aufgerufen, wenn die Maus den SVG-Bereich verlässt. Sie können damit Dinge wie Tooltips ausblenden.
  • spotRadius : Stellen Sie den Spotradius ein. Der Standardwert ist 2 .
  • cursorWidth : Legen Sie die Cursorbreite fest. Der Standardwert ist 2 .
  • interactive : Wenn true , wird der interaktive Modus aktiviert. Sie müssen diese Option nicht festlegen, wenn Sie einen onmousemove Rückruf bereitstellen.

Verwendung

Dies ist das minimale Arbeitsbeispiel:

 <!-- width, height and stroke-width attributes must be defined on the target SVG -->
< svg class =" sparkline " width =" 100 " height =" 30 " stroke-width =" 3 " > </ svg >

< script >
  sparkline ( document . querySelector ( ".sparkline" ) , [ 1 , 5 , 2 , 4 , 8 , 3 , 7 ] ) ;
</ script >

Sie können die Farben ändern, indem Sie entweder die Attribute direkt auf das SVG-Element setzen oder CSS verwenden, wie folgt:

 /* just the line */
. sparkline {
  stroke : red;
  fill : none;
}

/* line with highlight area */
. sparkline {
  stroke : red;
  fill : rgba ( 255 , 0 , 0 , .3 );
}

/* change the spot color */
. sparkline--spot {
  stroke : blue;
  fill : blue;
}

/* change the cursor color */
. sparkline--cursor {
  stroke : orange;
}

/* style fill area and line colors using specific class name */
. sparkline--fill {
  fill : rgba ( 255 , 0 , 0 , .3 );
}

. sparkline--line {
  stroke : red;
}

Beispiele

Statisch

Verfügbar unter https://codepen.io/fnando/full/KyZLLV/

Interaktiv

Verfügbar unter https://codepen.io/fnando/full/GOQLVE/

Lizenz

(Die MIT-Lizenz)

Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“) erhält, kostenlos die Erlaubnis erteilt, mit der Software ohne Einschränkung zu handeln, einschließlich und ohne Einschränkung der Rechte zur Nutzung, zum Kopieren, Ändern und Zusammenführen , Kopien der Software zu veröffentlichen, zu verteilen, unterzulizenzieren und/oder zu verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, vorbehaltlich der folgenden Bedingungen:

Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.

DIE SOFTWARE WIRD „WIE BESEHEN“ ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG. IN KEINEM FALL SIND DIE AUTOREN ODER URHEBERRECHTSINHABER HAFTBAR FÜR JEGLICHE ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, WEDER AUS EINER VERTRAGLICHEN HANDLUNG, AUS HANDLUNG ODER ANDERWEITIG, DIE SICH AUS, AUS ODER IN ZUSAMMENHANG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN HANDELN IN DER SOFTWARE ERGEBEN SOFTWARE.