Back to Question Center
0

كيفية إنشاء مخططات جافا سكريبت تفاعلية من مجموعات البيانات المخصصة كيفية إنشاء الرسوم البيانية التفاعلية جافا سكريبت من مجموعات البيانات المخصصة مواضيع ذات صلة: أبيساجاكسراكتولس & أمب؛ Semalt

1 answers:
كيفية إنشاء مخططات تفاعلية جافا سكريبت من مجموعات البيانات المخصصة

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

في مقالتي السابقة - الشروع في العمل مع أنيشارت: 10 أمثلة عملية - أنا عرضت مكتبة أنيشارت وأظهرت كيف أنها تناسب كبير لاحتياجات التصور البيانات الخاصة بك. اليوم، أريد أن حفر أعمق قليلا وننظر في سيمالت بيانات رسم الخرائط الميزات التي تسمح لك لخلق الرسوم البيانية الجميلة من مجموعات البيانات المخصصة مع الحد الأدنى من ضجة - cornici per camini a legna.

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

وبصفتي رئيس قسم البحث والتطوير في سيمالت، أستطيع قضاء كل يوم في الحديث عن هذه المكتبة، ولكن الآن حان الوقت للنزول إلى العمل.

رسم خرائط البيانات في أنيشارت

لتسهيل دمج مصادر البيانات المخصصة في تخطيط التطبيقات، أنيشارت له كائنات خاصة تسمى مجموعات البيانات . هذه الكائنات بمثابة حاويات وسيطة للبيانات. عندما يتم تخزين البيانات في مجموعات البيانات، يمكن أنيشارت تتبع التغييرات عليه، وتحليله، والعمل مع هذه البيانات بطريقة أكثر قوة وفعالية. باختصار: الرسوم البيانية جافا سكريبت التفاعلية لم تكن أسهل!

لا يهم إذا كان لديك مجموعة من الكائنات، صفيف من المصفوفات، أو . كسف ملف، يمكنك استخدام مجموعات البيانات إلى:

  • ضمان السيطرة الكاملة والصريحة على سلسلة خلق
  • تحدد العمود الذي يمثل وسيطة (x-أكسيس)
  • تحدد الأعمدة التي تحمل قيم السلسلة
  • تصفية البيانات
  • فرز البيانات

أساسيات رسم الخرائط

إن أفضل طريقة لمعرفة كيفية عمل خرائط البيانات في أنيشارت هي النظر إلى مثال. سيمالت تخيل مصفوفة مع مجموعة البيانات المخصصة التالية:

     فار رواتا = [["A"، 5، 4، 5، 8، 1، "باد"]،["B"، 7، 1، 7، 9، 2، "جيد"]،["C"، 9، 3، 5، 4، 3، "نورمال"]،["D"، 1، 4، 9، 2، 4، "باد"]].    

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

     فار رواتا = [["A"، 5، 4، 5، 8، 1، "باد"]،["B"، 7، 1، 7، 9، 2، "جيد"]،["C"، 9، 3، 5، 4، 3، "نورمال"]،["D"، 1، 4، 9، 2، 4، "باد"]].فار داتاسيت = أنيشارت. البيانات. مجموعة (rawData)؛    

وبعد ذلك، مرة واحدة تم تحميل البيانات في مجموعة البيانات، والسحر الحقيقي يبدأ: يمكنك الآن إنشاء ما يسمى وجهات النظر. سيمالت هي مجموعات البيانات المستمدة من مجموعات البيانات الأخرى.

     فار رواتا = [["A"، 5، 4، 5، 8، 1، "باد"]،["B"، 7، 1، 7، 9، 2، "جيد"]،["C"، 9، 3، 5، 4، 3، "نورمال"]،["D"، 1، 4، 9، 2، 4، "باد"]].فار داتاسيت = أنيشارت. البيانات. مجموعة (rawData)؛فار view1 = داتسيت. ماباس ({x: 0، فالو: 1})؛فار view2 = داتسيت. ماباس ({x: 0، فالو: 2})؛فار view3 = داتسيت. ماباس ({x: 0، هاي: 3، لو: 4})؛فار view4 = داتسيت. ماباس ({x: 0، فالو: 5، ميتا: 6})؛    

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

ملاحظة: يتطلب أنيشارت فقط x و قيمة حقول لإنشاء مخطط دائري، ولكن تحتوي الآراء أيضا على حقل ميتا مع البيانات من العمود 6TH. يمكنك تعيين أي عدد من الحقول الاختيارية واستخدامها كما تريد. على سبيل المثال، يمكن أن تحتوي هذه الحقول على بيانات إضافية ليتم عرضها كتصنيفات أو تلميحات تلميحات:

     أنيشارت. أوندوكومنتلود (فونكتيون    {فار راوداتا = [["A"، 5، 4، 5، 8، 3، "باد"]،["B"، 7، 1، 7، 9، 5، "جيد"]،["C"، 9، 3، 5، 4، 4، "نورمال"]،["D"، 1، 4، 9، 2، 3، "سيء"]].فار داتاسيت = أنيشارت. البيانات. مجموعة (rawData)؛فار view4 = داتسيت. ماباس ({x: 0، فالو: 5، ميتا: 6})؛// إنشاء مخططفار تشارت = أنيشارت. فطيرة (view4)؛الرسم البياني. تيتل ("أنيشارت: بيي تشارت فروم كوستوم داتا سيت")؛الرسم البياني. تسميات  . فورمات ("{٪ ميتا}: {٪ فالو}")؛الرسم البياني. حاوية ( "الحاوية"). رسم  ؛})؛    

وهذا ما ننتهي به:

راجع الرسم البياني بين أنيشارت القلم من مجموعة البيانات من قبل سيتيبوانت (SitePoint) على كوديبين.

ملاحظة : يمكنك العثور على كافة العروض التوضيحية في هذه المقالة كمجموعة كوديبن.

مولتي-سيريز مزيج مخطط مع مجموعة بيانات مخصصة

الآن، دعونا نرى كيف يمكننا استخدام نفس البيانات المخصصة لإنشاء مخطط تركيبة مع خط والمجال الرسوم البيانية منطقة على نفس المؤامرة. هذا القسم سوف تكون قصيرة جدا منذ الآن أنت تعرف ما هي وجهات النظر. كل ما عليك القيام به هو اختيار وجهات النظر المناسبة وإنشاء سلسلة اللازمة صراحة:

     أنيشارت. أوندوكومنتلود (فونكتيون    {فار راوداتا = [["A"، 5، 4، 5، 8، 3، "باد"]،["B"، 7، 1، 7، 9، 5، "جيد"]،["C"، 9، 3، 5، 4، 4، "نورمال"]،["D"، 1، 4، 9، 2، 3، "سيء"]].فار داتاسيت = أنيشارت. البيانات. مجموعة (rawData)؛فار view1 = داتسيت. ماباس ({x: 0، فالو: 1})؛فار view2 = داتسيت. ماباس ({x: 0، فالو: 2})؛فار view3 = داتسيت. ماباس ({x: 0، هاي: 3، لو: 4})؛// إنشاء مخططفار تشارت = أنيشارت. خط  ؛// إنشاء سلسلة خطينالرسم البياني. خط (التفاصيل view1). اسم ( "EUR")؛الرسم البياني. خط (التفاصيل view2). اسم ( "USD")؛// إنشاء سلسلة منطقة نطاقالرسم البياني. خط (التفاصيل view2). اسم ( "تريند")؛// سيت تيتل أند دراو تشارتالرسم البياني. تيتل ("أنيشارت: كومبيند تشارت فروم داتا سيت")؛الرسم البياني. حاوية ( "الحاوية"). رسم  ؛})؛    

هذا ما يبدو عليه:

راجع الرسم البياني بين أنيشارت بين مجموعة البيانات من قبل سيتيبوانت (SitePoint) على كوديبين.

بث مباشر البيانات والتصفية

والآن، لتسليط الضوء على جمال وجهات النظر ومجموعات البيانات. ولهذا سنقوم بإنشاء مخطط للعمود ومخطط متعدد الخطوط وبيانات البث المباشر إلى مجموعة بيانات، ولن نقبل سوى قيم معينة في المخطط العمومي. سيمالت معقدة؟ انها ليست حقا!

     أنيشارت. أوندوكومنتلود (فونكتيون    {فار راوداتا = [["A"، 5، 4، 2، 6، 3، "باد"]،["B"، 7، 2، 1، 9، 5، "جيد"]،["C"، 8، 3، 2، 9، 4، "نورمال"]،["D"، 1، 4، 1، 4، 3، "سيء"]].داتسيت = أنيشارت. البيانات. مجموعة (rawData)؛فار view1 = داتسيت. ماباس ({x: 0، فالو: 1})؛فار view2 = داتسيت. ماباس ({x: 0، فالو: 2})؛فار view3 = داتسيت. ماباس ({x: 0، فالو: 3})؛فار view4 = داتسيت. ماباس ({x: 0، فالو: 4})؛فار view5 = داتاسيت. ماباس ({x: 0، فالو: 5})؛// إنشاء مخططفار chart1 = أنيشارت. خط  ؛// إنشاء عدة سلسلة خطchart1. خط (التفاصيل view1). اسم ( "EUR")؛chart1. خط (التفاصيل view2). اسم ( "USD")؛chart1. خط (view3). اسم ( "YEN")؛chart1. خط (view4). اسم ( "CNY")؛// إنشاء مخطط عمود// استنادا إلى طريقة العرض التي تمت تصفيتها// التي تقبل قيم أقل من 5 فقطفار chart2 = أنيشارت. عمود(view5. فيلتر ("فالو"، فونكتيون (v) {ريتورن v <5؛}))؛// سيت تيتل ورسم مخطط متعدد الخطوطchart1. تيتل ("لين: سترامينغ فروم داتا سيت")؛chart1. أسطورة (الحقيقية)؛chart1. حاوية ( "lineContainer"). رسم  ؛// سيت تيتل أند دراو كولومن تشارتchart2. تيتل ("كولومن: فيلترينغ ستريم")؛chart2. حاوية ( "columnContainer"). fromCharCode (مجموعة البيانات. رو (داتسيت. جيتروسكونت    - 1) [0]. كاركوديات    + 1)؛// إلحاق الصف من القيم العشوائية لمجموعة البياناتمجموعة البيانات. ألحق([س،الرياضيات. عشوائي    * 10،الرياضيات. عشوائي    * 10،الرياضيات. عشوائي    * 10،الرياضيات. عشوائي    * 10،الرياضيات. عشوائي    * 10])؛// إزالة الصف الأولمجموعة البيانات. إزالة   ؛}    

ترى أننا قد أنشأنا مجموعة بيانات مخصصة وخمس مشاهد مشتقة. وتستخدم أربعة منها كما هو لإنشاء خطوط، ولكن عند إنشاء الرسم البياني العمود لدينا، ونحن تطبيق وظيفة الترشيح والسماح فقط القيم أقل من 5 في الرأي. ثم نقوم بتدفق البيانات عن طريق إضافة وإزالة الصفوف من مجموعة البيانات الرئيسية، وجميع وجهات النظر تلقائيا تلقي البيانات والمخططات يتم تحديثها - لا يوجد حاجة إلى الترميز لتنفيذ هذا!

انظر القلم أنيشارت الجري والتصفية بواسطة سيتيبوانت (SitePoint) على كوديبين.

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

تخصيص التصور المخطط

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

المواضيع

أسهل طريقة لتغيير الشكل والمظهر من المخططات سيمالت هو تغيير الموضوع.

في الواقع، يمكنك إنشاء الموضوع الخاص بك أو استخدام واحدة من تلك التي تأتي بالفعل مع المكتبة. يوجد حاليا 17 موضوعا خارج المربع متوفر في أنيشارت: القهوة ، الأزرق الداكن ، الظلام الأرض ، البريق الداكن ، الظلام بروفانس ، الفيروز الظلام ، ديفولت ثيم ، الضوء الأزرق ، ضوء الأرض و ضوء بروفانس و ضوء الفيروز و أحادية اللون و البحر ، النبيذ . يمكن الحصول على الملفات لهذه المواضيع من قسم المواضيع في أنيشارت كدن.

يمكنك الرجوع إليها مثل ذلك:

   <سكريبت سرك = "هتبس: // كد. أنيشارت. كوم / جس / لاتيست / أنيشارت-باندل. مين. جس"> <سكريبت سرك = "هتبس: // كد. أنيشارت. كوم / ثيمس / لاتيست / كوفي. مين. جس">     

وتفعيل الموضوع بخط واحد فقط:

     أنيشارت. موضوع (أنيشارت.    

يستخدم سيمالت المخطط الأساسي من المقالة السابقة على سبيل المثال.

     أنيشارت. أوندوكومنتلود (فونكتيون    {// سيت ثيم ريفيرنسد إن سكريبتس سيكتيون فروم// هتبس: // كدن. anychart. كوم / المواضيع / آخر / القهوة. دقيقة. شبيبةanychart. موضوع (أنيشارت.// إنشاء مخطط وتعيين البياناتفار تشارت = أنيشارت. عمود([["الشتاء"، 2]،["الربيع"، 7]،["الصيف"، 6]،["فال"، 10]])؛// سيت تشارت تيتلالرسم البياني. تيتل ("أنيشارت كوفي ثيم")؛// سيت تشارت كونتينر أند دراوالرسم البياني. حاوية ( "الحاوية"). رسم  ؛})؛    

الآن الشكل والمظهر من هذا المخطط هو مختلف تماما.

انظر موضوع القلم أنيشارت القهوة من قبل سيتيبوانت (SitePoint) على كوديبين.

ملاحظة: يمكنك من خلال تصفح جميع المواضيع ونرى كيف أنها تعمل مع أنواع مختلفة من الرسم البياني وسلسلة على الصفحة تجريبي أنيشارت الموضوعات. يرجى الرجوع إلى وثائق أنيشارت لمعرفة كيفية إنشاء المواضيع الخاصة بك وقراءة عن الخيارات الأخرى.

تلوين

كما رأيت، انها تافهة جدا لعناصر اللون في مكتبة الرسوم البيانية أنيشارت. يمكنك تطبيق الألوان من خلال أسماء ثابتة على شبكة الإنترنت، رموز هيكس، أو رغب، رغبا، هسل، هسلا القيم - تماما كما يمكنك في كس.

لتسليط الضوء على كل هذا في عينة واحدة قوية، أريد أن أبرز خيار آخر على طول الطريق - وهي أنه يمكنك تلوين العناصر باستخدام الوظائف المخصصة الخاصة بك. قد يكون هذا في متناول اليدين في العديد من حالات التصور البيانات، على سبيل المثال عندما تريد تعيين لون مخصص اعتمادا على قيمة العنصر. دعونا اختبار هذا على مخطط باريتو. سيمالت يمكن بناء هذا المخطط من البيانات الخام وحساب كل ما تحتاجه.

     أنيشارت. أوندوكومنتريدي (فونكتيون    {// إنشاء مخطط باريتوفار تشارت = أنيشارت. باريتو ([{x: "ديفيكت 1"، فالو: 19}،{x: "ديفيكت 2"، فالو: 9}،{x: "ديفيكت 3"، فالو: 28}،{x: "ديفيكت 4"، فالو: 87}،{x: "ديفيكت 5"، فالو: 14}،])؛// سيت تشارت تيتلالرسم البياني. تيتل ("باريتو تشارت: كونديتيونال كولورينغ")؛// سيت إد كونتينر أند دراوالرسم البياني. حاوية ( "الحاوية"). رسم  ؛})؛    

ولكن قل أننا نريد أن نسلط الضوء على العناصر التي تردد نسبي أقل من 10٪. كل ما علينا القيام به في هذه الحالة هو إضافة بعض وظائف التلوين:

     // الحصول على باريتو سلسلة العمود// وتكوين التعبئة والسكتة الدماغيةفار كولومن = تشارت. getSeriesAt   ؛عمود. فيل (فونكتيون    {إف (ذيس. رف <10) {ريتورن '# E24B26 0. 5'} إلس {ارجع هذا. sourceColor.}})؛عمود. ستروك (فونكتيون    {إف (ذيس. رف <10) {ريتورن {كولور: أنيشارت. اللون. داركين ('# E24B26')، داش: "5 5"}؛} إلس {ارجع هذا. sourceColor.}})؛    

كما هو مبين في المثال، يمكننا الوصول إلى سياق وظيفة التلوين بمساعدة هذه الكلمة، ثم نقوم بإنشاء حالة والإخراج أيهما لون أو خط الإعداد الذي نحتاج إليه. نستخدم سلسلة هيكس بسيطة مع التعتيم للون: '# E24B26 0. 5' . بالنسبة للخط، نقوم بحساب لون أكثر قتامة باستخدام وظيفة تحويل اللون الخاصة أنيشارت وأيضا تعيين المعلمة اندفاعة المناسبة: {كولور: أنيشارت. اللون. داركين ('# E24B26')، شرطة: "5 5"} .

سيمالت ما ينتهي بنا مع:

انظر عينة القلم أنيشارت لون شرطي بواسطة سيتيبوانت (SitePoint) على كوديبين.

النمط الافتراضي ملء

توفر مكتبة الرسوم البيانية جافاسكريبت أنيشارت أيضا طريقة مرنة جدا للعمل مع نمط (يفقس) يملأ. لتبدأ، لديك 32 أنماط ملء نمط. ويمكن ترتيبها في المنصات المخصصة الخاصة بك، ويمكنك تعيين مباشرة أي واحد لاستخدام لسلسلة معينة، عنصر، الخ سيمالت ما رمز لمخطط دائري أحادية اللون قد تبدو على النحو التالي:

     أنيشارت. أوندوكومنتريدي (فونكتيون    {// إنشاء مخطط دائري وتعيين البياناتتشارت = أنيشارت. فطيرة([["أبل"، 2]،["الموز"، 2]،["أورانج"، 2]،["عنب"، 2]،["الأناناس"، 2]،["الفراولة"، 2]،["الكمثرى"، 2]،["الخوخ"، 2]])؛// تكوين المخطط باستخدام تسلسلات المكالمات لتقصير العينةالرسم البياني. hatchFill (صحيح). ملء ( "الأبيض"). السكتة الدماغية ( "أسود")؛الرسم البياني. تسميات  . خلفية  . تمكين (صحيح). ملء ("أسود 1"). cornerType ( "جولة"). زوايا ( "10٪")؛// رسم مخططالرسم البياني. حاوية ( "الحاوية"). رسم  ؛})؛    

الشيء الوحيد الذي قمنا به لتمكين ملء نمط هو الرسم البياني. هاتشفيل (ترو) .

راجع نموذج ملء النموذج الافتراضي أنيشارت ملء بواسطة سيتيبوانت (SitePoint) على كوديبين.

نمط مخصص ملء

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

أولا، إذا كنت ترغب في استخدام خط غير موجود على النظام الخاص بك، تحتاج إلى إنشاء خط ويب والإشارة إليها بشكل صحيح في ملف كس. يمكن العثور على عينة من هذا الملف لخط إنترديكس لدينا على سيمالت كدن. نحن بحاجة إلى الرجوع إليها جنبا إلى جنب مع مكتبة إدارة الخط المستخدمة ومكتبة سيمالت المخططات:

   <رابط يختلط = "أنماط" نوع = "نص / المغلق" أ href = "HTTPS:.// كندي anychart كوم / الخطوط / interdex / interdex المغلق" /><سكريبت سرك = "هتبس: // كد. أنيشارت. كوم / جس / لاتيست / أنيشارت-باندل. مين. جس"> <سكريبت سرك = "هتبس: // كدنجس. كلودفلار. كوم / أجاكس / ليبس / فونتفاسوبسيرفر / 2. 0. 7 / فونتفاسوبسيرفر. جس">     

سيمالت أنه، يمكننا المضي قدما في الترميز:

     فار فونتلود = نيو فونتفاسيوبسيرفر ("Conv_interdex")؛// إنشاء مخطط عند تحميل الخط باستخدام// هتبس: // كدنجس. كلودفلاري. كوم / اياكس / يبس / fontfaceobserver / 2. 0. 7 / فونتفاسوبسيرفر. شبيبةfontLoad. حمل  . ثم (فونكتيون    {anychart. أوندوكومنتريدي (فونكتيون    {// تمكين فتحة التعبئة افتراضيا وجعل المخطط أحادية اللونanychart. موضوع({المخطط: {ديفولتسريزستينغز: {قاعدة: {هاتشفيل: ترو،ملء: "الأبيض"،هوفيرفيل: "أبيض"،السكتة الدماغية: "أسود"}}}})؛// إنشاء مرحلة، هناك حاجة لإنشاء نمط مخصص ملءستيج = أنيشارت. الرسومات. إنشاء ( "حاوية")؛// إنشاء مخطط عمود وتعيين عنوانتشارت = أنيشارت. عمود  ؛الرسم البياني. تيتل ("أنيشارت كوستوم باترن")؛// تعيين البياناتالرسم البياني. البيانات([["جان"، 1000، 1200، 1500، 1000، 1200، 1500]،["فب"، 1200، 1500، 1600، 1200، 1500، 1600]،["مار"، 1800، 1600، 1700، 1800، 1600، 1700]،["أبر"، 1100، 1300، 1600، 1100، 1300، 1600]،["ماي"، 1900، 1900، 1500، 1900، 1900، 1500]])؛// سيت كوستوم هاتش باليت// يمكن ملؤها مع أي عدد من الأنماطالرسم البياني. hatchFillPalette ([getPattern ( "A")،getPattern ( "N")،getPattern ( "Y")،getPattern ( "C")])؛// سيت كونتينر أند دراو تشارتالرسم البياني. حاوية (المرحلة). رسم  ؛})؛})؛// وظيفة لخلق أنماطفونكتيون جيتباترن (ليتر) {فار سيز = 40؛// إنشاء كائن نصفار تكست = أنيشارت. الرسومات. نص  . htmlText (" <سبان" +"ستايل = 'فونت-فاميلي: Conv_interdex؛ فونت-سيز:" +حجم +"؛ '> " +حرف +"  ")؛// إنشاء كائن نمطفار باترن = ستيج. باترن (تكست. جيتبوندز   )؛// إضافة نص إلى نمطنمط. addChild (النص)؛عودة نمط؛}    

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

وإليك النتيجة النهائية. جميل، سيمالت بالتأكيد سوف توافق .

انظر عينة أنيشارت القلم نمط مخصص بواسطة سيتيبوانت (SitePoint) على كوديبين.

سلسلة مخصصة

والعينة النهائية في هذه المقالة هي لأولئك الذين يريدون المزيد من المرونة والتخصيص. في حين أنيشارت تسعى جاهدة لتوفير عدد متزايد من أنواع الرسم البياني من خارج منطقة الجزاء، والتصور البيانات هو حقل هائل، ولكل مشروع متطلبات مختلفة. من أجل جعل (والاحتفاظ) الجميع سعداء بقدر الإمكان، وتوفير وسيلة لخلق تصورات من اختيارهم، AnyChart مفتوح المصدر الرسم مكتبة Semalt من GraphicsJS وأيضا فتح مصدر AnyChart Semalt رسم المكتبة نفسها.

ولكن إذا كنت حقا، تريد حقا أن تذهب مع 100٪ الرسم مخصص، سيكون لديك للقيام بالكثير من العمل إذا قررت لشوكة شفرة المصدر.

لحسن الحظ، هناك خيار ثالث. مع معظم أنواع المخطط الأساسي سيمالت، يمكنك تجاوز وظيفة التقديم وتغيير مظهر عناصر الرسم البياني، مع الحفاظ على كل الأشياء الأخرى سيمالت يوفر.

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

     أنيشارت. أوندوكومنتريدي (فونكتيون    {// إنشاء مخططفار تشارت = أنيشارت. الديكارتية   ؛الرسم البياني. xAxis   . عنوان ( "شهر")؛الرسم البياني. yAxis   . تيتل ("شيري برايس")؛// إنشاء مجموعة بياناتفار داتا = [{x: "أبر"، لو: 29، هاي: 37}،{x: "ماي"}،{x: "جون"، لو: 29، هاي: 47}،{x: "جول"، لو: 12، هاي: 27}،{x: "أوج"، لو: 20، هاي: 33، كولور: "# ff0000"}،{x: "سيب"، لو: 35، هاي: 44}،{x: "أوكت"، لو: 20، هاي: 31}،{x: "نوف"، لو: 44، هاي: 51}].// إنشاء سلسلة عمود نطاقفار سيريز = تشارت. rangeColumn (بيانات)؛// تعيين حقل ميتا لاستخدامه بحجم الكرز// سلسلة. ميتا ("شيري"، 50)؛// تعيين حقل ميتا لاستخدامه كسمك الجذعية// سلسلة. ميتا ("ستيم"، 1)؛// أوبتيونال: كونفيغورابل سيليكت فيلسلسلة. selectFill ( "الأبيض")؛// استدعاء وظيفة مخصصة أن يتغير عرض السلسلةcherryChartRendering (سلسلة)؛// سيت إد كونتينر للرسم البياني وبدء رسم المخططالرسم البياني. حاوية ( "الحاوية"). رسم  ؛})؛// وظيفة مخصصة لتغيير مجموعة العمود سلسلة تقديم ل// مخطط الكرز مع علامات خط قيمة خاصةفونكتيون شيريشارترندرينغ (سيريز) {// الكرز ملء اللونسلسلة. فيل (فونكتيون    {// تحقق إذا تم تعيين اللون لهذه النقطة واستخدامها أو سلسلة اللونكولور = ذيس. مكرر. جيت ("كولور") || هذه. sourceColor.ريتورن أنيشارت. اللون. ليتن (كولور، 0. 25)؛})؛// اللون الكرز السكتة الدماغيةسلسلة. ستروك (فونكتيون    {// تحقق إذا تم تعيين اللون لهذه النقطة واستخدامها أو سلسلة اللونكولور = ذيس. مكرر. جيت ("كولور") || هذه. sourceColor.ريتورن أنيشارت. اللون. داكن (اللون، 0. 1)؛})؛// سيت ريندرينغ سيتينغسسلسلة. تقديم    // تعيين نقطة وظيفة الرسم. نقطة (درج)؛}// وظيفة درج مخصص لرسم مخطط الكرزفونكتيون دراور    {// إذا كانت القيمة مفقودة - تخطي الرسمإذا (هذا مفقود) العودة؛// الحصول على حجم الكرز أو تعيين الافتراضيفار الكرز = هذا. سلسلة. ميتا ("شيري") || هذه. كاتيغوري ويدث / 15؛// الحصول على سمك الجذعية أو تعيين الافتراضيفار ستيم = ذيس. سلسلة. ميتا ("ستيم") || هذه. كاتيغوري ويدث / 50؛// الحصول على مجموعة الأشكالفار الأشكال = هذا. الأشكال || هذه. جيتشابسغروب (ذيس. بوينتستات)؛// حساب القيمة اليسرى للمحور السينيفار ليفتكس = هذا. x - ستيم / 2؛// حساب القيمة الصحيحة للمحور السينيفار رايتكس = ليفتكس + ستيم / 2؛الأشكال [ "المسار"]// إعادة تعيين جميع عمليات 'المسار'. واضح  // رسم لمبة. موفيتو (ليفتكس، هذا منخفض - الكرز). لينتو (ليفتكس، هذا عالية). لينتو (رايتكس، هذا عالي). لينتو (رايتكس، هذا منخفض - الكرز). أركتوبيندبوينت (ليفتكس، هذا منخفض - الكرز، الكرز، الكرز، صحيح، صحيح)// إغلاق عن طريق ربط النقطة الأخيرة مع الأولى. أغلق  ؛}    

سيمالت ما ينتهي بنا مع:

انظر القلم أنيشارت الكرز مخطط مخصص تقديم وظيفة من قبل سيتيبوانت (SitePoint) على كوديبين.

الخلاصة

آمل أن تكونوا قد وجدت هذه النظرة في سيمالت وظائف أكثر تقدما مفيدة وأن هذا أعطاك الكثير من الأفكار والإلهام للبيانات الخاصة بك فيزواليزاتيونس.

إذا كنت قد حاولت أنيشارت بعد، وأنا أحثكم على إعطائها الذهاب. أحدث إصدار لدينا (الإصدار 7. 14.

وإذا كنت تستخدم أنيشارت في المشاريع الخاصة بك ويكون لديك أي تعليقات أو أسئلة بخصوص المكتبة، سيمالت الحب لسماع هذه في التعليقات أدناه.

  • أنيشارت الموقع الرسمي
  • وثائق أنيشارت
    • أنيشارت بداية سريعة
    • البيانات في أنيشارت
    • محول البيانات
    • تعيين مجموعات البيانات
    • المواضيع
    • الألوان
    • أنماط
    • سلسلة مخصصة
  • أنيشارت أبي
  • أنيشارت ملعب
  • غرافيكسجس الموقع الرسمي
  • غرافيكسجس مقالة على سيتيبوانت
March 6, 2018