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