项目作者: sapk

项目描述 :
Simple charts build with svg without external deps
高级语言: Vue
项目地址: git://github.com/sapk/vue-svg-charts.git
创建时间: 2019-06-11T23:52:07Z
项目社区:https://github.com/sapk/vue-svg-charts

开源协议:MIT License

下载



vue-svg-charts


Lightweight Vue components for drawing pure svg charts without external dependencies.


Live demo

Live demo can be found on the project page: https://sapk.github.io/vue-svg-charts/

The code of the demo us available here: https://github.com/sapk/vue-svg-charts/blob/master/src/App.vue

Features

  • Pure SVG. Vue is only used for calculations.
  • No external dependencies

Installation

1. Install via yarn or npm

  1. yarn add vue-svg-charts

OR

  1. npm install vue-svg-charts

2. Import and use vue-svg-charts

  • ES6
  1. import BarGraph from "vue-svg-charts/components/bar";
  2. Vue.use(BarGraph);

Usage

Basic usage

With sane defaults in place, basic usage is as simple as passing a points array of values bar-graph component.

  1. <template>
  2. <bar-graph :points="points"></bar-graph>
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. points: [42, 8, 15, 16, 23, 42, 4, 8, 15]
  9. };
  10. }
  11. };
  12. </script>

Usage with all the available props

  1. <template>
  2. <bar-graph
  3. title="Test Bar Graph"
  4. animDuration="1s"
  5. :showValues="true"
  6. :easeIn="true"
  7. :points="points"
  8. :labels="labels"
  9. :width="1024"
  10. :height="320"
  11. ></bar-graph>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. points: [42, 8, 15, 16, 23, 42, 4, 8, 15],
  18. labels: [
  19. "Label 1",
  20. "Label 2",
  21. "Label 3",
  22. "Label 4",
  23. "Label 5",
  24. "Label 6",
  25. "Label 7",
  26. "Label 8",
  27. "Label 9"
  28. ]
  29. };
  30. }
  31. };
  32. </script>

Props

width

  • type: Number
  • default: 680
  • Width of the graph. Can be any positive value.

height

  • type: Number
  • default: 320
  • Height of the graph. Can be any positive value.

title

  • type: String
  • default: ``
  • Title to set for the graph (is display on hover).

points

  • type: Array
  • default: []
  • Values to display.

labels

  • type: Array
  • default: []
  • Lables related to values array.

showValues

  • type: Boolean
  • default: false
  • Specifies whether the graph should display values on top of bar.

animated

  • type: Boolean
  • default: true
  • Specifies whether the graph should be animated by transition.

animDuration

  • type: String
  • default: 1s
  • SVG animation duration.


Contributing

License

Code released under MIT license.

Roadmap

  • More graph

Inspired by: