A chart lib with matplotlib-like api to draw customizable charts.
NOT-DONE
- 支持多Chart | multiple charts
- 控制所有绘图细节 | control all drawing details
- 高性能的数据局部更新 | data partial update
- matplotlib风格API | matplotlib-style API
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Matplotlib.js Demo</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px solid black; background-color:red;"></canvas>
<script type="module">
import { Figure } from '../dist/mchart/index.js';
const fig = new Figure('myCanvas');
const ax = fig.add_subplot(2, 2, 0, 0);
// 绘制折线图 | draw line plot
const x = [1, 2, 3, 4, 5, 3];
const y = [2, 4, 1, 5, 3, 3];
ax.plot(x, y, { color: 'green' });
// 绘制散点图 | draw scatter plot
const x2 = [1.5, 2.5, 3.5, 4.5, 30];
const y2 = [3, 1, 4, 2, 30];
ax.scatter(x2, y2, { color: 'red', size: 8 });
// 设置坐标轴范围和标签 | set axes limits and labels
ax.set_xlim(0, 6);
ax.set_ylim(0, 6);
ax.set_xlabel('X');
ax.set_ylabel('Y');
const ax2 = fig.add_subplot(2, 2, 0, 1);
ax2.plot(x, y, { color: 'blue' });
ax2.set_xlim(0, 6);
ax2.set_ylim(0, 6);
ax2.set_xlabel('X');
ax2.set_ylabel('Y');
fig.show();
</script>
</body>
</html>
- Core 核心
- Canvas 画布 | Canvas
- Figure 图 | matplotlib-like Figure
- Scene 绘制元素管理 | Drawing element management
- Axes: 绘图区域 | Plotting area
- DataTransform2D 数据变换 | matplotlib-like Data Transformation
- AxesTransform2D 轴变换 | matplotlib-like Axes Ratio Transformation
- Renderer 渲染器 | Renderer
- Signal 信号 | Signal
- MarginOptions 边距 | Margin Options
- Legend 图例 | Legend
- Event 事件 | Event
- BoundingBox 包围盒 | Bounding Box
- Chart
- LineChart 折线图 | Line Chart
- BarChart 柱状图 | Bar Chart
- ScatterChart 散点图 | Scatter Plot
- CandlestickChart 蜡烛图 | Candlestick Chart
- Artist/Element: 绘图元素 | Drawing elements
- Drawable 绘图对象 | Drawable Object
- Line@v0.0.1 折线 | Line
- Circle 圆 | Circle
- Rectangle 矩形 | Rectangle
- Ellipse 椭圆 | Ellipse
- Text 文本 | Text
- Image 图像 | Image
- Legend 图例 | Legend
- KLine 蜡烛图 | KLine
- Animation 动画 | Animation
- AnimationFrame 动画帧 | Animation Frame
- AnimationPlayer 动画播放器 | Animation Player
基于npm安装mchart.js:
# 安装typescript | install typescript
npm install typescript
cd mchart.js
# 编译typescript为javascript | compile typescript to javascript
npx tsc
# 安装live-server | install live-server
npm install -g live-server
# 运行测试服务器, 打开http://localhost:8080/examples/demo_hello.html | run test server, open http://localhost:8080/examples/demo_hello.html
live-server
- 使用字符串而非enum
type CanvasTextBaseline = "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
- 检查Legend的实现, 暂放, 应直接传位置参数
- 检查Canvas的实现
- 目前不支持Nested-Scene, 是否应该支持
- 暂时不考虑Figure-强制options模式, 后续参照 Axis 的实现
- 暂时不考虑event-handler
- 暂时不考虑data_view, data_view_changed
- resize-event
- 检查Scene的可见性等
- dpi问题
- more examples