[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10094":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":42,"discoverSource":43},10094,"vue-chartjs","apertureless\u002Fvue-chartjs","apertureless","📊  Vue.js wrapper for Chart.js","https:\u002F\u002Fvue-chartjs.org",null,"TypeScript",5718,813,66,18,0,2,4,66.13,"MIT License",false,"main",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38],"chart","charting-library","chartjs","diagram","diagrams","doughnut","pie","visualisation","vue","vue-component","vue3","vuejs","vuejs2","vuejs3","2026-06-12 04:00:48","# vue-chartjs\n\n\u003Cimg align=\"right\" width=\"150\" height=\"150\" alt=\"vue-chartjs logo\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fapertureless\u002Fvue-chartjs\u002Fmain\u002Fassets\u002Fvue-chartjs.png\">\n\n**vue-chartjs** is a wrapper for [Chart.js](https:\u002F\u002Fgithub.com\u002Fchartjs\u002FChart.js) in Vue. You can easily create reuseable chart components.\n\nSupports Chart.js v4.\n\n[![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fvue-chartjs.svg)](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fvue-chartjs)\n[![codecov](https:\u002F\u002Fcodecov.io\u002Fgh\u002Fapertureless\u002Fvue-chartjs\u002Fbranch\u002Fmaster\u002Fgraph\u002Fbadge.svg)](https:\u002F\u002Fcodecov.io\u002Fgh\u002Fapertureless\u002Fvue-chartjs)\n[![Build Status](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Fapertureless\u002Fvue-chartjs\u002Fci.yml?branch=main)](https:\u002F\u002Fgithub.com\u002Fapertureless\u002Fvue-chartjs\u002Factions)\n[![Package Quality](http:\u002F\u002Fnpm.packagequality.com\u002Fshield\u002Fvue-chartjs.svg)](http:\u002F\u002Fpackagequality.com\u002F#?package=vue-chartjs)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fvue-chartjs.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-chartjs)\n[![Gitter chat](https:\u002F\u002Fimg.shields.io\u002Fgitter\u002Froom\u002FTechnologyAdvice\u002FStardust.svg)](https:\u002F\u002Fgitter.im\u002Fvue-chartjs\u002FLobby)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fmashape\u002Fapistatus.svg)](https:\u002F\u002Fgithub.com\u002Fapertureless\u002Fvue-chartjs\u002Fblob\u002Fmaster\u002FLICENSE.txt)\n[![CDNJS version](https:\u002F\u002Fimg.shields.io\u002Fcdnjs\u002Fv\u002Fvue-chartjs.svg)](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Fvue-chartjs)\n[![Known Vulnerabilities](https:\u002F\u002Fsnyk.io\u002Ftest\u002Fgithub\u002Fapertureless\u002Fvue-chartjs\u002Fbadge.svg)](https:\u002F\u002Fsnyk.io\u002Ftest\u002Fgithub\u002Fapertureless\u002Fvue-chartjs)\n[![Donate](https:\u002F\u002Fraw.githubusercontent.com\u002Fapertureless\u002Fvue-chartjs\u002Fmain\u002Fassets\u002Fdonate.svg)](https:\u002F\u002Fwww.paypal.me\u002Fapertureless\u002F50eur)\n[![ko-fi](https:\u002F\u002Fwww.ko-fi.com\u002Fimg\u002Fgithubbutton_sm.svg)](https:\u002F\u002Fko-fi.com\u002FC0C1WP7C)\n\n\u003Cbr \u002F>\n\u003Ca href=\"#quickstart\">QuickStart\u003C\u002Fa>\n\u003Cspan>  •  \u003C\u002Fspan>\n\u003Ca href=\"#docs\">Docs\u003C\u002Fa>\n\u003Cspan>  •  \u003C\u002Fspan>\n\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002Ftagged\u002Fvue-chartjs\">Stack Overflow\u003C\u002Fa>\n\u003Cbr \u002F>\n\u003Chr \u002F>\n\n## Quickstart\n\nInstall this library with peer dependencies:\n\n```bash\npnpm add vue-chartjs chart.js\n# or\nyarn add vue-chartjs chart.js\n# or\nnpm i vue-chartjs chart.js\n```\n\nThen, import and use individual components:\n\n```vue\n\u003Ctemplate>\n  \u003CBar :data=\"data\" :options=\"options\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\">\nimport {\n  Chart as ChartJS,\n  Title,\n  Tooltip,\n  Legend,\n  BarElement,\n  CategoryScale,\n  LinearScale\n} from 'chart.js'\nimport { Bar } from 'vue-chartjs'\n\nChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)\n\nexport default {\n  name: 'App',\n  components: {\n    Bar\n  },\n  data() {\n    return {\n      data: {\n        labels: ['January', 'February', 'March'],\n        datasets: [{ data: [40, 20, 12] }]\n      },\n      options: {\n        responsive: true\n      }\n    }\n  }\n}\n\u003C\u002Fscript>\n```\n\n\u003Chr \u002F>\n\nNeed an API to fetch data? Consider [Cube](https:\u002F\u002Fcube.dev\u002F?ref=eco-vue-chartjs), an open-source API for data apps.\n\n\u003Cbr \u002F>\n\n[![supported by Cube](https:\u002F\u002Fuser-images.githubusercontent.com\u002F986756\u002F154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https:\u002F\u002Fcube.dev\u002F?ref=eco-vue-chartjs)\n\n## Docs\n\n- [Reactivity](https:\u002F\u002Fvue-chartjs.org\u002Fguide\u002F#updating-charts)\n- [Access to Chart instance](https:\u002F\u002Fvue-chartjs.org\u002Fguide\u002F#access-to-chart-instance)\n- [Accessibility](https:\u002F\u002Fvue-chartjs.org\u002Fguide\u002F#accessibility)\n- [Migration from v4 to v5](https:\u002F\u002Fvue-chartjs.org\u002Fmigration-guides\u002F#migration-from-v4-to-v5\u002F)\n- [Migration from vue-chart-3](https:\u002F\u002Fvue-chartjs.org\u002Fmigration-guides\u002F#migration-from-vue-chart-3\u002F)\n- [API](https:\u002F\u002Fvue-chartjs.org\u002Fapi\u002F)\n- [Examples](https:\u002F\u002Fvue-chartjs.org\u002Fexamples\u002F)\n\n## Build Setup\n\n``` bash\n# install dependencies\npnpm install\n\n# build for production with minification\npnpm build\n\n# run unit tests\npnpm test:unit\n\n# run all tests\npnpm test\n```\n\n## Contributing\n\n1. Fork it ( https:\u002F\u002Fgithub.com\u002Fapertureless\u002Fvue-chartjs\u002Ffork )\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\n## License\n\nThis software is distributed under [MIT license](LICENSE.txt).\n\n\u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002Fxcqjaytbl\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fwww.buymeacoffee.com\u002Fassets\u002Fimg\u002Fcustom_images\u002Fpurple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" >\u003C\u002Fa>\n","vue-chartjs 是一个用于在 Vue.js 项目中集成 Chart.js 的封装库。它允许开发者轻松创建可复用的图表组件，并且支持最新的 Chart.js v4 版本。该项目采用 TypeScript 编写，提供了丰富的图表类型（如折线图、柱状图、饼图等），并且具有良好的文档和社区支持。适用于需要在 Vue 应用中展示数据可视化内容的各种场景，包括但不限于仪表盘开发、数据分析报告以及任何需要图形化展示数据的应用程序。","2026-06-11 03:26:31","top_topic"]