الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

خط التألق

قم بإنشاء خطوط SVG باستخدام JavaScript دون أي تبعية خارجية.

التثبيت

هذا lib متاح كحزمة NPM. لتثبيته، استخدم الأمر التالي: 

 npm install @fnando/sparkline --save

إذا كنت تستخدم الغزل (ويجب عليك): 

 yarn add @fnando/sparkline

سيتعين عليك الاتصال بـ 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/

رخصة

(رخصة معهد ماساتشوستس للتكنولوجيا)

يُمنح الإذن مجانًا لأي شخص يحصل على نسخة من هذا البرنامج وملفات الوثائق المرتبطة به ("البرنامج") للتعامل في البرنامج دون قيود، بما في ذلك، على سبيل المثال لا الحصر، حقوق الاستخدام والنسخ والتعديل والدمج. ونشر و/أو توزيع وترخيص من الباطن و/أو بيع نسخ من البرنامج، والسماح للأشخاص الذين تم توفير البرنامج لهم بالقيام بذلك، وفقًا للشروط التالية:

يجب تضمين إشعار حقوق الطبع والنشر أعلاه وإشعار الإذن هذا في جميع النسخ أو الأجزاء الكبيرة من البرنامج.

يتم توفير البرنامج "كما هو"، دون أي ضمان من أي نوع، صريحًا أو ضمنيًا، بما في ذلك، على سبيل المثال لا الحصر، ضمانات القابلية للتسويق والملاءمة لغرض معين وعدم الانتهاك. لا يتحمل المؤلفون أو أصحاب حقوق الطبع والنشر بأي حال من الأحوال المسؤولية عن أي مطالبة أو أضرار أو مسؤولية أخرى، سواء في إجراء العقد أو الضرر أو غير ذلك، الناشئة عن أو خارج أو فيما يتعلق بالبرنامج أو الاستخدام أو المعاملات الأخرى في برمجة.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل