หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

เส้นประกายไฟ

สร้างเส้นประกายไฟ SVG ด้วย JavaScript โดยไม่ต้องพึ่งพาภายนอก

การติดตั้ง

lib นี้พร้อมใช้งานเป็นแพ็คเกจ NPM หากต้องการติดตั้งให้ใช้คำสั่งต่อไปนี้: 

 npm install @fnando/sparkline --save

หากคุณใช้ Yarn (และคุณควร): 

 yarn add @fnando/sparkline

คุณจะต้องเรียก sparkline.sparkline(svg, values, options) โดยตรงหากคุณกำลังโหลดสคริปต์โดยไม่ต้องคอมไพล์สคริปต์ของคุณ (เช่น webpack) มิฉะนั้น คุณสามารถ import sparkline from "@fnando/sparkline"; -

เอพีไอ

sparkline(svg, values, options = {})

  • svg : นี่คือการอ้างอิง <svg> ที่ต้องมีแอตทริบิวต์ที่จำเป็นสามประการ ( width , height และ stroke-width ) คุณลักษณะเหล่านี้ใช้ในการคำนวณพื้นที่การวาด
  • values : คุณสามารถระบุอาร์เรย์ของตัวเลขหรืออาร์เรย์ของวัตถุที่ตอบสนองต่อ .value หากคุณมีโครงสร้างข้อมูลอื่น โปรดดูที่ options.fetch
  • options : อาร์กิวเมนต์เผื่อเลือกนี้ช่วยให้คุณปรับแต่งเส้นประกายไฟเพิ่มเติมได้ ตัวเลือกที่ใช้ได้คือ:
    • fetch : ใช้ฟังก์ชันนี้เพื่อส่งคืนค่าหากคุณมีโครงสร้างข้อมูลอื่นที่ Sparkline ไม่รองรับโดยกำเนิด
    • 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/

ใบอนุญาต

(ใบอนุญาตเอ็มไอที)

อนุญาตให้บุคคลใดๆ ได้รับสำเนาของซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") โดยไม่เสียค่าใช้จ่าย เพื่อจัดการกับซอฟต์แวร์โดยไม่มีข้อจำกัด รวมถึงแต่ไม่จำกัดเพียงสิทธิ์ในการใช้ คัดลอก ปรับเปลี่ยน ผสาน เผยแพร่ แจกจ่าย ให้อนุญาตช่วง และ/หรือขายสำเนาของซอฟต์แวร์ และอนุญาตให้บุคคลที่ได้รับซอฟต์แวร์นี้สามารถทำได้ ภายใต้เงื่อนไขต่อไปนี้:

ประกาศเกี่ยวกับลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์

ซอฟต์แวร์นี้มีให้ 'ตามที่เป็น' โดยไม่มีการรับประกันใดๆ ทั้งโดยชัดแจ้งหรือโดยนัย ซึ่งรวมถึงแต่ไม่จำกัดเพียงการรับประกันความสามารถในการค้าขาย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ และการไม่ละเมิด ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดต่อการเรียกร้องค่าเสียหายหรือความรับผิดอื่นใดไม่ว่าในการกระทำของสัญญาการละเมิดหรืออย่างอื่นที่เกิดขึ้นจากหรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือข้อตกลงอื่น ๆ ใน ซอฟต์แวร์.

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด