muze
v2.0.0
Muze是一個免費的數據可視化庫，用於使用WebAssembly在瀏覽器中創建探索性數據可視化（如Tableau） 。它使用層次的圖形語法（GOG）為Web創建可組合的交互式數據可視化。它非常適合在Visual Analytics儀表板和應用中使用，以創建高性能，交互式，多維和合成可視化。
它使用數據優先的方法來定義圖表的構造和層，自動生成跨曲子交互性，並允許您超越圖表上的任何行為或交互。
Muze使用瀏覽器datamodel來存儲和轉換數據，並控制可視化中每個組件的行為，從而創建複雜和交叉連接的圖表。
？通過使用可組合圖層結構來構建複雜和交互式可視化。
？使用豐富的數據運算符來轉換，可視化和與數據進行交互。
？通過配置物理行為模型和副作用來定義自定義互動。
✂️使用CSS改變圖表的外觀和感覺。
☀️對於您的所有可視化和從數據控制的所有可視化和互動都有一個真實的來源。
？通過按需派遣操作來輕鬆與現有應用程序集成。
使用WebAssembly來處理大型數據集並提高性能。
將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 install @chartshq/muze然後，您需要添加一個WebPack插件複製webpack-plugin，以將一些必需的木馬文件複製到輸出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-App-Themplate，以快速通過樣板應用程序快速嘗試Muze 。
安裝完成後，請按照以下步驟操作：
// 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 ; // 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版本https://github.com/chartshq/muze-deprecated
現在，穆茲變成了異步，而不是在以前的JavaScript版本中同步。
創建Env
Muze棄用版本：
const env = muze ( ) ;
const canvas = env . canvas ( ) ;最新版本：
( async function ( ) {
const env = await muze ( ) ;
const canvas = env . canvas ( ) ;
} ) ( ) ;派遣行為
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 ]
}
}
} ) ; 請在此處提出一個GitHub問題。
請為我們的公共願望清單做出貢獻，或在Muze公共願望清單和路線圖上介紹現有功能。
自定義許可證（免費使用）
