صدر الإصدار الجديد v3.13 اليوم! يأتي هذا الإصدار مع 4 ميزات جديدة وإصلاحين للأخطاء وتحسينات في الأدوات.

للحصول على معلومات الإصدار التفصيلية، يرجى مراجعة ملاحظة الإصدار:
https://github.com/naver/billboard.js/releases/tag/3.13.0

ما الجديد؟

منطقة-خطوة-نطاق الرسم البياني

تعتبر أنواع النطاق مفيدة لتصور "القيم النطاقية" من القيمة الأساسية. من هذا الإصدار سيتم توفير نوع "خطوة" جديد للتنوع.

العرض التوضيحي: https://naver.github.io/billboard.js/demo/#Chart.FunnelChart

import bb, {areaStepRange} from "billboard";

bb.generate({
  data: {
    columns: [
     ["data1", [70, 40, 30],
     [155, 130, 115],
     [160, 135, 120],
     [200, 120, 110],
     [95, 50, 40],
     [199, 160, 125]
    ]],
    type: areaStepRange()
  }
});

المناطق تقديم التحسن

لعرض بعض النطاق بخط متقطع، يتم استخدام خيار data.regions. ولكن طريقة عرض الخطوط المتقطعة، تتم عن طريق الجمع بين أوامر المسارات المتعددة كخطوط متقطعة، يجب أن تكون كذلك.

من لقطة الشاشة المثال أعلاه، هناك حاجة إلى أمر مسار متعدد لرسم خطوط متقطعة.

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

تسبب هذا الأسلوب في بعض مشكلات العرض (#1، #2) وحاولنا تحسين هذا بالطريقة الأصلية.

بدلاً من رسم الخطوط المتقطعة باستخدام أوامر المسار، انتقلنا إلى العرض باستخدام خاصية نمط السكتة الدماغية-داشاراي.

• قبل: أمر المسار/ بعد: السكتة الدماغية-dasharray

العرض التوضيحي: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions

عند التفاعل مع التكبير/التصغير، تم تحسين أداء إطار الرسوم المتحركة من 84 مللي ثانية → 5 مللي ثانية!

من خلال التحديث إلى 3.12، سوف تحصل على الفائدة دون أي تغييرات في الكود.

legend.format: تقديم معرف البيانات الأصلي
عند تحديد خيار data.names، فإنه سيجعل أسماء بيانات العرض مختلفة عن الأسماء (المعرف) الأصلية.

{
  data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
    columns: [
       ["data1", 71.4],
       ["data2", 10]
    ]
  }
}

في هذه الحالة، رد الاتصال legend.format، سوف يتلقى قيمة data.names المستبدلة، بدلاً من المعرف الأصلي.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id) {
       // id will be 'Detailed Name' and 'Name Detailed'
    }
}

من هذا الإصدار سيتم توفير قيمة "المعرف" الأصلية مع الأسماء المستبدلة.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id, dataId) {
        // id will be 'Detailed Name' and 'Name Detailed'
        // dataId will be 'data1' and 'data2'
    }
}

العرض التوضيحي: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat

رد اتصال bar.width

في السابق، كان من الممكن تحديد bar.width القيمة المطلقة أو قيمة النسبة. لا يمكن أن يعكس المطلق تغيير حجم المخطط ديناميكيًا ويمكن أن تعكس النسبة مع بعض القيود.

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

x Axis tick Interval * ratio

على سبيل المثال، إذا كان عرض المخطط 500 بكسل، مع عدد علامات التجزئة للمحور 5 ×، فسيكون الفاصل الزمني 100 بكسل تقريبًا.

في هذه الحالة، إذا تم تحديد bar.ratio=0.5، فستكون المعادلة كما يلي، وسيكون عرض الشريط 49.9 بكسل.

100(exact value is 99.8) * 0.5 = 49.9

لمنح مزيد من التحكم في ضبط قيمة عرض الشريط، سيتم تحسين خيار bar.width لقبول وظيفة رد اتصال بمعلمات سهلة الاستخدام.

العرض التوضيحي: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth

bar: {
    width: function(width, targetsNum, maxDataCount) {
         // - width: chart area width
         // - targetsNum: number of targets
         // - maxDataCount: maximum data count among targets
   }
}

شيء آخر، التحديث في إطار الاختبار

لقد اعتمدنا Karma Mocha في إطار الاختبار لدينا وكانت تجربة رائعة للحفاظ على استقرار Billboard.js.

للأسف، أعلنت Karma عن الإيقاف وكنا بحاجة إلى ترحيل بعض أطر الاختبار الحديثة الأخرى للحفاظ على استقرار المكتبة واتباع النظام البيئي الحديث.

بعد بعض الأبحاث، قررنا الانتقال إلى فيتيست. لقد نجحنا في الترحيل ضمن هذا الإصدار وتم تحسين الاختبار المحلي بنسبة تصل إلى 63%!

لمزيد من التفاصيل، قم بالخروج https://github.com/naver/billboard.js/pull/3866

إغلاق

هذا كل ما لدينا لهذا الإصدار ونشكرك على متابعتنا!