تنزيل muze - تنزيل رمز المصدر muze

muze

بيانات الموقع

v2.0.0

تنزيل

ما هو المخز؟

Muze هي مكتبة تصور البيانات المجانية لإنشاء تصورات بيانات استكشافية (مثل Tableau) في المتصفح ، باستخدام Webassembly. يستخدم قواعد اللغة ذات الطبقات من الرسومات (GOG) لإنشاء تصور بيانات قابلة للتكوين وتفاعلية للويب. إنه مثالي للاستخدام في لوحات معلومات التحليلات المرئية وتطبيقاتها لإنشاء تصورات عالية الأداء وتفاعلية ومتعددة الأبعاد وقابلة للتأليف.

يستخدم نهجًا قبل البيانات لتحديد بنيات وطبقات المخطط ، ويولد تلقائيًا التفاعل عبر المخطط ، ويسمح لك بإفراط في ركوب أي سلوك أو تفاعل على المخطط.

يستخدم Muze datamodel في المتصفح لتخزين البيانات وتحويلها ، والتحكم في سلوك كل مكون في التصور ، مما يتيح إنشاء مخططات معقدة ومتصلة.

سمات

؟ بناء تصورات معقدة وتفاعلية باستخدام بنيات طبقة قابلة للتكوين .
؟ استخدم عوامل البيانات الغنية لتحويل البيانات وتصورها والتفاعل معها.
؟ تحديد التفاعلات المخصصة من خلال تكوين النموذج السلوكي المادي والتأثير الجانبي .
✂ استخدم CSS لتغيير المظهر والشعور بالمخططات.
☀ لديك مصدر واحد للحقيقة لجميع التصور والتفاعل الذي يتم التحكم فيه من البيانات.
؟ الاندماج بسهولة مع التطبيق الحالي عن طريق إرسال الإجراءات عند الطلب.
يستخدم Webassembly للتعامل مع مجموعات البيانات الضخمة ولأداء أفضل .

تثبيت

CDN

أدخل بنية Muze و CSS المطلوبة في <head> :

 < link href =" https://cdn.jsdelivr.net/npm/@chartshq/[email protected]/dist/muze.css " rel =" stylesheet " >
< script src =" https://cdn.jsdelivr.net/npm/@chartshq/[email protected]/dist/muze.js " type =" text/javascript " > </ script >

NPM

قم بتثبيت Muze من NPM:

$ npm install @chartshq/muze

ثم تحتاج إلى إضافة نسخ مكون الإضافي webpack webpack-plugin لنسخ بعض ملفات muze المطلوبة إلى مجلد الإخراج dist أو build .

npm install [email protected] --save-dev

ثم ضمن كائن تكوين WebPack الخاص بك ، ستحتاج إلى إضافة copy-webpack-plugin إلى قائمة الإضافات ، مثل ذلك:

 const path = require ( "path" ) ;
const CopyWebpackPlugin = require ( 'copy-webpack-plugin' ) ;

module . exports = {
  plugins : [
    new CopyWebpackPlugin ( [
      {
        // Provide your node_modules path where @chartshq/muze
        // package is installed.
        from : path . resolve ( "<your_node_modules_path>" , "@chartshq/muze/dist" ) ,
        to : '.'
      } ,
    ] ) ,
  ]
}

يمكنك أيضًا الخروج من مواد تطبيق Muze لتجربة Muze بسرعة من خلال تطبيق Boilerplate.

ابدء

بمجرد الانتهاء من التثبيت ، يرجى اتباع الخطوات أدناه:

إعداد البيانات والمخطط المقابل:

 // Prepare the schema for data.
const schema = [
  {
    name : 'Name' ,
    type : 'dimension'
  } ,
  {
    name : 'Maker' ,
    type : 'dimension'
  } ,
  {
    name : 'Horsepower' ,
    type : 'measure' ,
    defAggFn : 'avg'
  } ,
  {
    name : 'Origin' ,
    type : 'dimension'
  }
]

// Prepare the data.
const data = [
   {
    "Name" : "chevrolet chevelle malibu" ,
    "Maker" : "chevrolet" ,
    "Horsepower" : 130 ,
    "Origin" : "USA"
  } ,
  {
    "Name" : "buick skylark 320" ,
    "Maker" : "buick" ,
    "Horsepower" : 165 ,
    "Origin" : "USA"
  } ,
  {
    "Name" : "datsun pl510" ,
    "Maker" : "datsun" ,
    "Horsepower" : 88 ,
    "Origin" : "Japan"
  }
]

استيراد المخزين على النحو التالي:

إذا كنت تستخدم حزمة NPM ، فاستيف الحزمة وملف CSS الخاص بها.

 import muze from '@chartshq/muze' ;
import "@chartshq/muze/dist/muze.css" ;

إذا كنت تستخدم CDN ، استخدمه على النحو التالي:

 const muze = window . muze ;

قم بإنشاء Datamodel ومخطط أساسي:

 // As the muze and DataModel are asynchronous, so we need to
// use async-await syntax.
async function myAsyncFn ( ) {
  // Load the DataModel module.
  const DataModel = await muze . DataModel . onReady ( ) ;
  
  // Converts the raw data into a format
  // which DataModel can consume.
  const formattedData = await DataModel . loadData ( data , schema ) ;

  // Create a new DataModel instance with
  // the formatted data.
  let dm = new DataModel ( formattedData ) ;
  
  // Create a global environment to share common configs across charts.
  const env = await muze ( ) ;
 
  // Create a new canvas instance from the global
  // environment to render chart on.
  const canvas = env . canvas ( ) ;

  canvas
  . data ( dm ) // Set data to the chart.
  . rows ( [ "Horsepower" ] ) // Fields drawn on Y axis.
  . columns ( [ "Origin" ] ) // Fields drawn on X axis.
  . mount ( "#chart" ) ; // Specify an element to mount on using a CSS selector.
}

myAsyncFn ( )
  . catch ( console . error . bind ( console ) ) ;

الوثائق

يمكنك العثور على دروس مفصلة ومفاهيم ومراجع API في وثائقنا.

ماذا تغير؟

يتم الآن تشغيل Muze 2.0.0 بواسطة Webassembly مما يؤدي إلى تحسين أداء كبير على الإصدارات السابقة. تم إهمال إصدار JavaScript ولن يتم تطوير أي تطوير نشط في هذا الإصدار - لكننا سنصلح الأخطاء الحرجة عند رفعها في Github.

يجلب هذا الإصدار من Muze قوة التجميع على شبكة الإنترنت للتعامل مع مجموعات البيانات الكبيرة بسهولة ، إلى جانب التفاعل الخالٍ من الاحتكاك وتقديمه. بالإضافة إلى ذلك ، فإن جزء تحميل البيانات في إصدار Webassembly غير متزامن ، بدلاً من كونه متزامنًا في إصدار JavaScript. علاوة على ذلك ، فإن إصدار WebAssembly مجاني ولكنه متوفر فقط باعتباره ثنائيًا تم تجميعه ، في حين أن إصدار JavaScript مجاني ومفتوح المصدر (MIT).

يمكنك زيارة إصدار JavaScript الذي تم إهماله هنا https://github.com/chartshq/muze-deprecated

ترحيل من الإصدارات السابقة من المحر

الآن أصبح المحكر غير متزامن بدلاً من كونه متزامنًا في إصدار JavaScript السابق.

تم تغيير واجهات برمجة التطبيقات

خلق البيئة

النسخة المنخفضة موز:

 const env = muze ( ) ;
const canvas = env . canvas ( ) ;

أحدث إصدار:

 ( async function ( ) {
  const env = await muze ( ) ;
  const canvas = env . canvas ( ) ;
} ) ( ) ;

Dispatchbehaviour

النسخة المنخفضة موز:

 canvas . firebolt ( ) . dispatchBehaviour ( 'highlight' , {
  criteria : {
    Maker : [ 'ford' ]
  }
} ) ;

أحدث إصدار:

في الإصدار الحالي ، يجب تمرير المعرفات في كائن الأبعاد أو كائن النطاق إذا كان قياسًا أو حقلًا مؤقتًا.

 // Dispatch highlight behaviour on data plots having maker as ford
canvas . firebolt ( ) . dispatchBehaviour ( 'highlight' , {
  criteria : {
    dimensions : {
      Maker : [ 'ford' ]
    }
  }
} ) ;

// Dispatch highlight behaviour on data plots having Acceleration
// between 20 and 50.
canvas . firebolt ( ) . dispatchBehaviour ( 'highlight' , {
  criteria : {
    range : {
      Acceleration : [ 20 , 50 ]
    }
  }
} ) ;