{"id":30858569,"url":"https://github.com/linxueyuanstdio/plotlyrender","last_synced_at":"2026-02-16T09:37:38.062Z","repository":{"id":303532009,"uuid":"1015807997","full_name":"LinXueyuanStdio/PlotlyRender","owner":"LinXueyuanStdio","description":"Plotly渲染器","archived":false,"fork":false,"pushed_at":"2025-07-08T04:34:10.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-25T12:10:22.823Z","etag":null,"topics":["plotly","plotly-python","plotlyjs"],"latest_commit_sha":null,"homepage":"http://linxueyuan.online/PlotlyRender/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LinXueyuanStdio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-08T04:30:05.000Z","updated_at":"2025-09-06T17:46:53.000Z","dependencies_parsed_at":"2025-07-08T06:22:33.660Z","dependency_job_id":"07ecb8c0-5101-41bd-995a-fe76f1bea99a","html_url":"https://github.com/LinXueyuanStdio/PlotlyRender","commit_stats":null,"previous_names":["linxueyuanstdio/plotlyrender"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/LinXueyuanStdio/PlotlyRender","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2FPlotlyRender","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2FPlotlyRender/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2FPlotlyRender/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2FPlotlyRender/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinXueyuanStdio","download_url":"https://codeload.github.com/LinXueyuanStdio/PlotlyRender/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinXueyuanStdio%2FPlotlyRender/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29504895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plotly","plotly-python","plotlyjs"],"created_at":"2025-09-07T14:14:09.179Z","updated_at":"2026-02-16T09:37:38.045Z","avatar_url":"https://github.com/LinXueyuanStdio.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PlotlyRender\n\n\u003e 🎨 一个基于 Plotly.js 的在线 JSON 数据可视化工具\n\n## 📖 项目简介\n\nPlotlyRender 是一个简单易用的在线数据可视化工具，允许用户通过输入 JSON 格式的数据来快速生成各种类型的图表。该工具基于强大的 Plotly.js 库构建，提供了丰富的图表类型和交互功能。\n\n## ✨ 主要特性\n\n- 🎯 **即时渲染**：输入 JSON 数据，一键生成图表\n- 📊 **多种图表类型**：支持折线图、柱状图、饼图、散点图等\n- 🎨 **现代化界面**：采用 Tailwind CSS 构建的美观响应式界面\n- 💾 **图表导出**：支持导出 PNG 和 SVG 格式\n- 🔧 **实时验证**：JSON 格式实时校验和错误提示\n- 📱 **响应式设计**：完美适配桌面和移动设备\n- 🚀 **快速示例**：内置多个示例数据，快速上手\n\n## 🛠️ 技术栈\n\n- **前端框架**：原生 HTML/CSS/JavaScript\n- **图表库**：[Plotly.js](https://plotly.com/javascript/)\n- **样式框架**：[Tailwind CSS](https://tailwindcss.com/)\n- **字体图标**：[Font Awesome](https://fontawesome.com/)\n- **字体**：[Inter](https://rsms.me/inter/)\n\n## 🚀 快速开始\n\n### 在线使用\n\n直接在浏览器中打开 `index.html` 文件即可使用。\n\n### 本地运行\n\n1. 克隆项目到本地：\n```bash\ngit clone https://github.com/LinXueyuanStdio/PlotlyRender.git\ncd PlotlyRender\n```\n\n2. 直接用浏览器打开 `index.html` 文件，或使用本地服务器：\n```bash\n# 使用 Python 3\npython -m http.server 8000\n\n# 使用 Python 2\npython -m SimpleHTTPServer 8000\n\n# 使用 Node.js\nnpx http-server\n\n# 使用 Live Server (VS Code 扩展)\n# 右键点击 index.html -\u003e Open with Live Server\n```\n\n3. 在浏览器中访问 `http://localhost:8000`\n\n## 📝 使用说明\n\n### 1. 输入 JSON 数据\n\n在左侧的文本框中输入符合 Plotly.js 格式的 JSON 数据。支持两种格式：\n\n**格式一：完整对象格式**\n```json\n{\n  \"data\": [\n    {\n      \"type\": \"scatter\",\n      \"x\": [1, 2, 3, 4, 5],\n      \"y\": [10, 15, 13, 17, 20],\n      \"mode\": \"lines+markers\"\n    }\n  ],\n  \"layout\": {\n    \"title\": \"我的图表\",\n    \"xaxis\": {\"title\": \"X轴\"},\n    \"yaxis\": {\"title\": \"Y轴\"}\n  }\n}\n```\n\n**格式二：数据数组格式**\n```json\n[\n  {\n    \"type\": \"bar\",\n    \"x\": [\"苹果\", \"香蕉\", \"橙子\"],\n    \"y\": [12, 19, 3]\n  }\n]\n```\n\n### 2. 使用内置示例\n\n点击工具栏中的示例按钮快速载入预设数据：\n- 📈 **折线图**：展示时间序列数据\n- 📊 **柱状图**：比较不同类别的数据\n- 🥧 **饼图**：展示数据的比例关系\n- 🎯 **散点图**：展示数据点的分布\n\n### 3. 渲染图表\n\n点击 \"渲染图表\" 按钮（或使用快捷键 `Ctrl+Enter`）生成图表。\n\n### 4. 导出图表\n\n图表渲染成功后，可以使用右上角的导出按钮：\n- 🖼️ **PNG**：适合插入文档或演示\n- 🎨 **SVG**：矢量格式，适合印刷和缩放\n\n## 🎯 支持的图表类型\n\n- **折线图** (`scatter` with `mode: 'lines'`)\n- **散点图** (`scatter` with `mode: 'markers'`)\n- **柱状图** (`bar`)\n- **饼图** (`pie`)\n- **直方图** (`histogram`)\n- **箱线图** (`box`)\n- **热力图** (`heatmap`)\n- **3D 散点图** (`scatter3d`)\n- **等高线图** (`contour`)\n- **更多类型**：参考 [Plotly.js 文档](https://plotly.com/javascript/reference/)\n\n## 🔧 高级功能\n\n### 键盘快捷键\n\n- `Ctrl+Enter` (或 `Cmd+Enter`)：渲染图表\n- JSON 编辑器支持语法高亮和错误提示\n\n### 自定义配置\n\n您可以在 JSON 中添加 `config` 字段来自定义图表行为：\n\n```json\n{\n  \"data\": [...],\n  \"layout\": {...},\n  \"config\": {\n    \"displayModeBar\": true,\n    \"responsive\": true,\n    \"toImageButtonOptions\": {\n      \"format\": \"png\",\n      \"filename\": \"my_chart\",\n      \"height\": 600,\n      \"width\": 800\n    }\n  }\n}\n```\n\n## 🤝 贡献指南\n\n欢迎提交 Issue 和 Pull Request！\n\n1. Fork 本项目\n2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交您的更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 打开一个 Pull Request\n\n## 📜 许可证\n\n本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。\n\n## 🙏 致谢\n\n- [Plotly.js](https://plotly.com/javascript/) - 强大的图表库\n- [Tailwind CSS](https://tailwindcss.com/) - 优秀的 CSS 框架\n- [Font Awesome](https://fontawesome.com/) - 图标字体库\n\n## 📞 联系方式\n\n如有问题或建议，请通过以下方式联系：\n\n- 📧 Email: [linxy59@mail2.sysu.edu.cn]\n- 🐛 Issues: [GitHub Issues](https://github.com/LinXueyuanStdio/PlotlyRender/issues)\n\n---\n\n⭐ 如果这个项目对您有帮助，请给它一个星星！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinxueyuanstdio%2Fplotlyrender","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinxueyuanstdio%2Fplotlyrender","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinxueyuanstdio%2Fplotlyrender/lists"}