您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

7 年前
7 年前
7 年前
7 年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <div align="center">
  2. <img src="https://github.com/frappe/design/blob/master/logos/logo-2019/frappe-charts-logo.png" height="128">
  3. <a href="https://frappe.github.io/charts">
  4. <h2>Frappe Charts</h2>
  5. </a>
  6. <p align="center">
  7. <p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p>
  8. <a href="https://frappe.github.io/charts">
  9. <b>Explore Demos » </b>
  10. </a>
  11. <a href="https://codepen.io/pratu16x7/pen/wjKBoq">
  12. <b> Edit at CodePen »</b>
  13. </a>
  14. </p>
  15. </div>
  16. <p align="center">
  17. <a href="https://travis-ci.org/frappe/charts">
  18. <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
  19. </a>
  20. <a href="http://github.com/frappe/charts/tree/master/dist/js/frappe-charts.min.iife.js">
  21. <img src="http://img.badgesize.io/frappe/charts/master/dist/frappe-charts.min.iife.js.svg?compression=gzip">
  22. </a>
  23. <a href="https://travis-ci.org/frappe/charts">
  24. <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
  25. </a>
  26. </p>
  27. <p align="center">
  28. <a href="https://frappe.github.io/charts">
  29. <img src=".github/example.gif">
  30. </a>
  31. </p>
  32. ### Contents
  33. * [Installation](#installation)
  34. * [Usage](#usage)
  35. * [Contribute](https://frappe.io/charts/docs/contributing)
  36. * [Updates](#updates)
  37. * [License](#license)
  38. #### Installation
  39. * Install via [`npm`](https://www.npmjs.com/get-npm):
  40. ```console
  41. $ npm install frappe-charts
  42. ```
  43. and include in your project:
  44. ```js
  45. import { Chart } from "frappe-charts"
  46. ```
  47. ...or include following for es-modules(eg:vuejs):
  48. ```js
  49. import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
  50. // import css
  51. import 'frappe-charts/dist/frappe-charts.min.css'
  52. ```
  53. * ...or include within your HTML
  54. ```html
  55. <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
  56. <!-- or -->
  57. <script src="https://unpkg.com/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
  58. ```
  59. #### Usage
  60. ```js
  61. const data = {
  62. labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
  63. "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
  64. ],
  65. datasets: [
  66. {
  67. name: "Some Data", type: "bar",
  68. values: [25, 40, 30, 35, 8, 52, 17, -4]
  69. },
  70. {
  71. name: "Another Set", type: "line",
  72. values: [25, 50, -10, 15, 18, 32, 27, 14]
  73. }
  74. ]
  75. }
  76. const chart = new frappe.Chart("#chart", { // or a DOM element,
  77. // new Chart() in case of ES6 module with above usage
  78. title: "My Awesome Chart",
  79. data: data,
  80. type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
  81. height: 250,
  82. colors: ['#7cd6fd', '#743ee2']
  83. })
  84. ```
  85. ...or for es-modules:
  86. ```js
  87. //replace new frappe.Chart() with new Chart()
  88. const chart = new Chart("#chart", { // or a DOM element,
  89. // new Chart() in case of ES6 module with above usage
  90. title: "My Awesome Chart",
  91. data: data,
  92. type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
  93. height: 250,
  94. colors: ['#7cd6fd', '#743ee2']
  95. })
  96. ```
  97. If you want to contribute:
  98. 1. Clone this repo.
  99. 2. `cd` into project directory
  100. 3. `npm install`
  101. 4. `npm run dev`
  102. #### Updates
  103. ##### v1.0.0
  104. - Major rewrite out. Some new features include:
  105. - Mixed type axis datasets
  106. - Stacked bar charts
  107. - Value over data points
  108. - Y Markers and regions
  109. - Dot size, Bar space size, and other options
  110. - Legend for axis charts
  111. - We would be looking to incorporate existing PRs and issues in the meantime.
  112. ##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development.
  113. ##### v0.0.7
  114. - [Custom color values](https://github.com/frappe/charts/pull/71) for charts as hex codes. The API now takes an array of colors for all charts instead of a color for each dataset.
  115. - [@iamkdev's](https://github.com/iamkdev) blog on [usage with Angular](https://medium.com/@iamkdev/frappé-charts-with-angular-c9c5dd075d9f).
  116. ##### v0.0.5
  117. - More [flexible Y values](https://github.com/frappe/charts/commit/3de049c451194dcd8e61ff91ceeb998ce131c709): independent from exponent, minimum Y axis point for line graphs.
  118. - Customisable [Heatmap colors](https://github.com/frappe/charts/pull/53); check out the Halloween demo on the [website](https://frappe.github.io/charts) :D
  119. - Tooltip values can be [formatted](https://github.com/frappe/charts/commit/e3d9ed0eae14b65044dca0542cdd4d12af3f2b44).
  120. ##### v0.0.4
  121. - Build update: [Shipped](https://github.com/frappe/charts/pull/35) an ES6 module, along with the browser friendly IIFE.
  122. ##### v0.0.2
  123. - We have an animated [Pie Chart](https://github.com/frappe/charts/issues/29)! Thanks [@sheweichun](https://github.com/sheweichun).
  124. - [@tobiaslins](https://github.com/tobiaslins) contributed tweaks for his quest to make these easy to use with React. Check out his [repo](https://github.com/tobiaslins/frappe-charts-react-example) and updates at [#24](https://github.com/frappe/charts/issues/24) to learn more :)
  125. - A new logo.
  126. ##### v0.0.1
  127. - The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.
  128. #### License
  129. This repository has been released under the [MIT License](LICENSE)
  130. ------------------
  131. Project maintained by [Frappe](https://frappe.io).
  132. Used in [ERPNext](https://erpnext.com). Read the [blog post](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97).