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公共愿望清单和路线图上介绍现有功能。
自定义许可证（免费使用）
