sparkline

迷你圖

使用 JavaScript 產生 SVG 迷你圖，無需任何外部依賴。

安裝

該庫可作為 NPM 套件使用。要安裝它，請使用以下命令：

 npm install @fnando/sparkline --save

如果你正在使用 Yarn（你應該）：

 yarn add @fnando/sparkline

如果您想要載入腳本而不編譯腳本（例如 webpack），則必須直接呼叫sparkline.sparkline(svg, values, options) 。否則，您可以簡單地import sparkline from "@fnando/sparkline"; 。

應用程式介面

sparkline(svg, values, options = {})

• svg ：這是一個<svg>引用，必須包含三個必要的屬性（ width 、 height和stroke-width ）。這些屬性用於計算繪圖區域。
• values ：您可以提供回應.value的數字數組或物件數組。如果您有不同的資料結構，請參閱options.fetch 。
• options ：此選用參數可讓您進一步自訂迷你圖。可用的選項有：
  • fetch ：如果您有迷你圖本身不支援的不同資料結構，請使用此函數傳回值。
  • onmousemove ：透過設定此回呼函數，您將啟用互動模式（除非您將options.interactive設定為false ）。回調簽名是callback(event, datapoint) ，其中datapoint是一個包含值、x/y座標和項目索引的物件。
  • onmouseout ：每次滑鼠離開 SVG 區域時都會呼叫此回呼函數。您可以使用它來隱藏工具提示等內容。
  • spotRadius ：設定光點半徑。預設值為2 。
  • cursorWidth ：設定遊標寬度。預設值為2 。
  • interactive ：當true時，這將啟用互動模式。如果您提供onmousemove回調，則不必設定此選項。

用法

這是最小的工作範例：

 <!-- 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 >

您可以透過直接為 SVG 元素設定屬性或使用 CSS 來變更顏色，如下所示：

 /* 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;
}

範例

靜止的

位於 https://codepen.io/fnando/full/KyZLLV/

互動的

位於 https://codepen.io/fnando/full/GOQLVE/

執照

（麻省理工學院許可證）

特此免費授予任何獲得本軟體和相關文件文件（「軟體」）副本的人不受限制地使用本軟體，包括但不限於使用、複製、修改、合併的權利、發布、分發、再授權和/或銷售軟體的副本，並允許向其提供軟體的人員這樣做，但須滿足以下條件：

上述版權聲明和本授權聲明應包含在本軟體的所有副本或主要部分中。

本軟體以「現況」提供，不提供任何明示或暗示的保證，包括但不限於適銷性、特定用途的適用性和不侵權的保證。 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE軟體.