Vue.js创建漂亮的图表– Vue Chartkick

Vue.js创建漂亮的图表– Vue Chartkick
插件名称 vue-chartkick
发布时间 2020年6月21日
插件作者 ankane

Vue Chartkick是一个轻量级的Vue.js组件,用于使用Chart.js,Google Charts和Highcharts创建漂亮的图表  。

序号插件名称序号插件名称
1Vue Wrapper For Charts.CSS 图表框架 - vue.charts.css12Vue.js创建漂亮的图表– Vue Chartkick
2Vue 3的基于SVG的图表库 - vue3-charts13交互式图表和抓图组件– vue-declarative-plots
3使用ApexCharts构建交互式可视化SVG图表 - vue3-apexcharts14Vue.js的拖放调度图表程序– scheduler-lite
4Vue 3渲染Highcharts.js图表组件​ - vue3-highcharts15Vue.js的简单反应式图表–vue-chartless
5适用于Vue.js的简单SVG图表库 - vue-simple-chart16Vue的可定制和可组合图表– vue-wcharts
6适用于Google图表的Reactive Vue.js包装器-GChart17简单的纯Vue.js图表​​组件 -pure-vue-chart
7Vue.js的现代图表库– Laue18Chart.Js创建简单和漂亮的图表 - vue-chartjs
8Vue.js 图表 Chart.js组件19使用Vue.js和Chart.js构建HTML5画布图表 - vue-chart
9Vue.js的带有SVG和Smith图表组件20Vue FusionCharts轻量级组件 - vue-fusioncharts
10Vue.js的图表库组件 - V-Charts21Vue.js中的动画条形图种族生成器
11Vue.js基于D3.js可自定义的图表​​插件22Vue和D3.js的朝阳组件 - vue-d3-sunburst

变更日志:

2020年7月25日

  • v0.6.1:添加了代码选项

2020年6月20日

  • v0.6.0

支持的图表类型:

  • 折线图
  • 饼形图
  • 柱形图
  • 条形图
  • 面积图
  • 散点图
  • 地理图
  • 时间线
  • 和更多

安装和下载:

npm install chartkick vue-chartkick --save

图表

折线图

<line-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></line-chart>

饼形图

<pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]"></pie-chart>

柱形图

<column-chart :data="[['Sun', 32], ['Mon', 46], ['Tue', 28]]"></column-chart>

条形图

<bar-chart :data="[['Work', 32], ['Play', 1492]]"></bar-chart>

面积图

<area-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></area-chart>

散点图

<scatter-chart :data="[[174.0, 80.0], [176.5, 82.3]]" xtitle="Size" ytitle="Population"></scatter-chart>

地理图表-Google图表

<geo-chart :data="[['United States', 44], ['Germany', 23], ['Brazil', 22]]"></geo-chart>

时间轴-Google图表

<timeline :data="[['Washington', '1789-04-29', '1797-03-03'], ['Adams', '1797-03-03', '1801-03-03']]"></timeline>