ดาวน์โหลด muze - muze Source Code Download

muze

ข้อมูลเว็บไซต์

v2.0.0

ดาวน์โหลด

Muze คืออะไร?

Muze เป็น ไลบรารีการสร้างภาพข้อมูลฟรีสำหรับการสร้างการสร้างภาพข้อมูลเชิงสำรวจ (เช่น Tableau) ในเบราว์เซอร์โดยใช้ WebAssembly มันใช้ไวยากรณ์แบบเลเยอร์ของกราฟิก (GOG) เพื่อสร้างการสร้างภาพข้อมูลข้อมูลแบบคอมโพสิตและแบบโต้ตอบสำหรับเว็บ เหมาะสำหรับใช้ในแดชบอร์ดและแอปพลิเคชันการวิเคราะห์ด้วยภาพเพื่อสร้างการสร้างภาพข้อมูลแบบอินเทอร์แอคทีฟหลายมิติและการรวมตัวกัน

มันใช้วิธีการข้อมูลแรกเพื่อกำหนดโครงสร้างและเลเยอร์ของแผนภูมิสร้างการโต้ตอบข้ามแผนภูมิโดยอัตโนมัติและช่วยให้คุณสามารถใช้พฤติกรรมหรือการโต้ตอบใด ๆ บนแผนภูมิได้มากเกินไป

Muze ใช้ DataModel ในเบราว์เซอร์เพื่อจัดเก็บและแปลงข้อมูลและควบคุมพฤติกรรมของทุกองค์ประกอบในการสร้างภาพซึ่งทำให้การสร้างแผนภูมิที่ซับซ้อนและเชื่อมต่อข้าม

คุณสมบัติ

- สร้างการสร้างภาพข้อมูลที่ซับซ้อนและโต้ตอบโดยใช้การสร้างเลเยอร์ แบบคอมโพ สิต
- ใช้ ตัวดำเนินการข้อมูล ที่หลากหลายเพื่อแปลงแสดงภาพและโต้ตอบกับข้อมูล
- กำหนดปฏิสัมพันธ์ที่กำหนดเองโดยการกำหนดค่า แบบจำลองพฤติกรรมทางกายภาพ และ ผลข้างเคียง
✂ใช้ CSS เพื่อเปลี่ยนรูปลักษณ์และความรู้สึกของแผนภูมิ
☀มี แหล่งความจริงเพียงแหล่งเดียว สำหรับการสร้างภาพและการโต้ตอบทั้งหมดของคุณจากข้อมูล
- รวมเข้ากับแอปพลิเคชันที่มีอยู่ของคุณได้อย่างง่ายดายโดย ส่งการกระทำ ตามความต้องการ
ใช้ WebAssembly สำหรับการจัดการชุดข้อมูลขนาดใหญ่และเพื่อ ประสิทธิภาพที่ดีขึ้น

การติดตั้ง

CDN

แทรก Muze Build และ 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 Plugin Copy-Webpack-Plugin เพื่อคัดลอกไฟล์ MUZE ที่จำเป็นบางอย่างไปยังโฟลเดอร์ Output dist หรือ build ของคุณ

npm install [email protected] --save-dev

จากนั้นภายในวัตถุการกำหนดค่า webpack ของคุณคุณจะต้องเพิ่ม copy-webpack-plugin ลงในรายการปลั๊กอินเช่น SO:

 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-App-template ของเราเพื่อลอง 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"
  }
]

นำเข้า muze ดังนี้:

หากคุณใช้แพ็คเกจ 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 สำหรับการจัดการชุดข้อมูลขนาดใหญ่ได้อย่างง่ายดายพร้อมกับการโต้ตอบและการแสดงผลแบบไม่มีแรงเสียดทาน นอกจากนี้ส่วนการโหลดข้อมูลในเวอร์ชัน WebAssembly นั้นเป็นแบบอะซิงโครนัสซึ่งตรงข้ามกับการซิงโครนัสในเวอร์ชัน JavaScript นอกจากนี้เวอร์ชัน WebAssembly นั้นฟรี แต่มีให้เฉพาะเป็นไบนารีที่รวบรวมไว้เท่านั้นในขณะที่รุ่น JavaScript นั้นฟรีและโอเพ่นซอร์ส (MIT)

คุณสามารถเยี่ยมชมเวอร์ชัน JavaScript ที่เลิกใช้แล้วได้ที่นี่

การย้ายจาก Muze รุ่นก่อนหน้า

ตอนนี้ Muze กลายเป็นแบบอะซิงโครนัสเมื่อเทียบกับการซิงโครนัสในรุ่น JavaScript ก่อนหน้า

เปลี่ยน APIs

การสร้าง env

Muze รุ่นที่เลิกใช้แล้ว:

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

เวอร์ชันล่าสุด:

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

dispatchbehaviour

Muze รุ่นที่เลิกใช้แล้ว:

 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 ]
    }
  }
} ) ;