{"id":13402185,"url":"https://github.com/AnyChart/GraphicsJS","last_synced_at":"2025-03-14T07:32:37.147Z","repository":{"id":57253241,"uuid":"57264250","full_name":"AnyChart/GraphicsJS","owner":"AnyChart","description":"A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.","archived":false,"fork":false,"pushed_at":"2024-09-10T06:58:02.000Z","size":1537,"stargazers_count":992,"open_issues_count":8,"forks_count":68,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-10-10T12:37:48.038Z","etag":null,"topics":["anychart","google-closure","google-closure-library","javascript","javascript-library","svg","vector-graphics","vml"],"latest_commit_sha":null,"homepage":"http://www.graphicsjs.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnyChart.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}},"created_at":"2016-04-28T02:30:13.000Z","updated_at":"2024-10-09T13:14:56.000Z","dependencies_parsed_at":"2024-10-25T22:27:33.354Z","dependency_job_id":null,"html_url":"https://github.com/AnyChart/GraphicsJS","commit_stats":{"total_commits":83,"total_committers":11,"mean_commits":7.545454545454546,"dds":0.6385542168674698,"last_synced_commit":"d24c5b5e4bcf435a0a573abb81708d640842e841"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2FGraphicsJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2FGraphicsJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2FGraphicsJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnyChart%2FGraphicsJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnyChart","download_url":"https://codeload.github.com/AnyChart/GraphicsJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243437965,"owners_count":20290864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["anychart","google-closure","google-closure-library","javascript","javascript-library","svg","vector-graphics","vml"],"created_at":"2024-07-30T19:01:12.532Z","updated_at":"2025-03-14T07:32:37.139Z","avatar_url":"https://github.com/AnyChart.png","language":"JavaScript","readme":"# GraphicsJS\nGraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.\n\n* [Overview](#overview)\n* [Quick Start](#quick-start)\n* [Articles](#articles)\n* [Building](#building)\n* [Contributing](#contributing)\n* [Links](#articles)\n\n# Overview\n\n[GraphicsJS](http://www.graphicsjs.org/) is a JavaScript graphics library that allows you to draw absolutely anything, including any sort of interactive and animated graphics with any visual effects.\n\nYou can think of GraphicsJS as a paintbox with a brush, GraphicsJS may be used for data visualization, charting, game design or else. [AnyChart charting libraries](https://www.anychart.com/) rendering is based fully on it.\n\nYou can find some specific samples at [http://www.graphicsjs.org/](http://www.graphicsjs.org/), along with source code: [galaxy](https://playground.anychart.com/gallery/latest/Graphics/Galaxy-plain), [rain](https://playground.anychart.com/gallery/latest/Graphics/Rain-plain), [bonfire](https://playground.anychart.com/gallery/latest/Graphics/Bonfire-plain), [Bender](https://playground.anychart.com/gallery/latest/Graphics/Bender-plain), and a [playable 15-puzzle](https://playground.anychart.com/gallery/latest/Graphics/Puzzle_15-plain). All of these were created with GraphicsJS only.\n\nGraphicsJS allows to visualize complicated mathematical algorithms very conveniently and easily, e.g. the [galaxy](https://playground.anychart.com/gallery/latest/Graphics/Galaxy-plain) demo is based on [Archimedean spiral](https://en.wikipedia.org/wiki/Archimedean_spiral).\n\nGraphicsJS has one the most powerful [line drawing features](https://docs.anychart.com/Graphics/Paths) among SVG/VML based graphics libraries that provide only Bezier curves out of the box. But GraphicsJS is great at working with mathematical functions. As a result, GraphicsJS allows you to draw not only Bezier curves out of the box, but literally anything; for example, you can draw some arc very quickly, whereas other graphics libraries will make you arrange it through numerous different curves. And surely there are [basic shapes available](https://docs.anychart.com/Graphics/Shapes)\n\nGraphicsJS has the richest [text features](https://docs.anychart.com/Graphics/Text_and_Fonts), for example, SVG/VML technologies do not provide this out of the box, as well as most of other JavaScript drawing libraries. GraphicsJS supports multiline texts and also offers text measurement, including width, height, as well as wrap, overflow, indent, spacing, align, etc.\n\nGraphicsJS has implements the [Virtual DOM](https://docs.anychart.com/Graphics/Virtual_DOM) which makes drawing more robust and manageable.\n\nGraphicsJS uses smart layering system for elements and [layers](https://docs.anychart.com/Graphics/Layers).\n\nGraphicsJS supports z-index. Typically, if you ever decided to change the overlapping order, you would have to erase everything and draw the whole picture again, from scratch. With GraphicsJS, you are given the power to arrange this dynamically, which is extremely helpful when you are creating some big graphical thing and it is important for you to specify which elements must be seen at one moment or another.\n\nGraphicsJS provides a convenient [Transformations](https://docs.anychart.com/Graphics/Transformations) API that allows to move, scale, rotate and shear both elements and groups of elements. Transformations, in good hands, when used along with [flexible Event Model](https://docs.anychart.com/Graphics/Events) and [Virtual DOM](https://docs.anychart.com/Graphics/Virtual_DOM), is a very powerfull tool.\n\nGraphicsJS [supports legacy browsers including IE6+](https://docs.anychart.com/Graphics/Browser_Support).\n\nGraphicsJS API is very convenient to use. [GraphicsJS API](https://api.anychart.com/latest/anychart.graphics) is very concise and provides chaining support, which makes it possible to use a dozen lines of code where other libraries require a hundred.\n\nGraphicsJS is built on a very reliable technology, Google Closure, just like Google Mail, Google Calendar, Google Drive, and so on.\n\n# Quick Start\n\nTo get started with GraphicsJS create simple HTML document and copy paste the following code (or just grab the sample from [playground](https://playground.anychart.com/docs/7.14.0/samples/GFX_quick_start-plain)):\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\" /\u003e\n\t\u003cscript src=\"https://cdn.anychart.com/releases/v8/js/graphics.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\t\u003cdiv id=\"stage-container\" style=\"width: 400px; height: 375px;\"\u003e\u003c/div\u003e\n\t\u003cscript\u003e\n\t\t// create a stage for the Deathly Hallows symbol\n        stage = acgraph.create('stage-container');\n        // draw the square\n        stage.rect(5, 5, 350, 300);\n        // draw the circle\n        stage.circle(177.5, 205, 100);\n        // draw the triangle\n        stage.path()\n            .moveTo(5, 305)\n            .lineTo(175, 5)\n            .lineTo(355, 305);\n        // draw the wand in the middle\n        stage.path()\n            .moveTo(175, 5)\n            .lineTo(175, 305);\n\t\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nLaunch the page in your browser and here you are: you have created your first drawing with GraphicsJS. See [documentation](https://docs.anychart.com/Graphics/Basics) and [API](https://api.anychart.com/latest/anychart.graphics) to learn more.\n\n# Articles\n- [Introducing GraphicsJS, a Powerful Lightweight Graphics Library](https://www.sitepoint.com/introducing-graphicsjs-a-powerful-lightweight-graphics-library/) by [@RomanLubushkin](https://github.com/RomanLubushkin)\n- [GraphicsJS Overview](https://docs.anychart.com/Graphics/Overview) by [AnyChart](https://www.anychart.com/)\n\n# Building\n\n*Coming soon.*\n\n# Contributing\n\nTo contribute to AnyChart project please:\n\n* Fork GraphicsJS repository.\n* Create a branch from the `develop` branch.\n* Make any changes you want to contribute.\n* Create a pull request against the `develop` branch.\n\n[GitHub documentation: Forking repositories](https://help.github.com/articles/fork-a-repo/).\n[GitHub documentation: Collaborating using pull requests](https://help.github.com/categories/collaborating-with-issues-and-pull-requests/).\n\n# Links\n- [GraphicsJS  Website](http://www.graphicsjs.org/)\n- [GraphicsJS Users's Guide](https://docs.anychart.com/Graphics/Basics)\n- [GraphicsJS API](https://api.anychart.com/latest/anychart.graphics)\n- [GraphicsJS at GitHub](https://github.com/anychart/graphicsjs)\n- [Report a bug or an issue](https://github.com/anychart/graphicsjs/issues)\n[![Analytics](https://ga-beacon.appspot.com/UA-228820-4/GraphicsJS?pixel\u0026useReferer)](https://github.com/igrigorik/ga-beacon)\n","funding_links":[],"categories":["JavaScript","Data Visualization","Data Visualization [🔝](#readme)","Visualization","数据可视化"],"sub_categories":["Runner","JavaScript Libraries","运行器","运行器e2e测试"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnyChart%2FGraphicsJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAnyChart%2FGraphicsJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnyChart%2FGraphicsJS/lists"}