Vue Wrapper For Charts.CSS 图表框架 - vue.charts.css

Vue Wrapper For Charts.CSS 图表框架 - vue.charts.css
插件名称 vue.charts.css
发布时间 2021年8月23日
插件作者 Vue-Charts-CSS

这是Charts.css 框架的 Vue 包装器,可帮助您在 Vue 应用程序中生成漂亮的图表。

序号插件名称序号插件名称
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

安装和下载:

# Yarn
$ yarn add vue.charts.css

# NPM
$ npm i vue.charts.css

如何使用它:

1、导入并注册vue.charts.css。

import Vue from "vue";
import VueChartsCSS from "vue.charts.css";
Vue.use(VueChartsCSS);

2、在模板中添加图表组件,确定图表类型,定义图表数据如下:

<charts-css
  heading="Chart Heading"
  type="bar"
  :labels="['Label 1', 'Label 2', 'Label 3']"
  :datasets="datasets"
/>
export default {
  data()
  {
      return {
          datasets: [
              {
                  name: "Data 1",
                  values: [2, 4, 3],
              },
              {
                  name: "Data 2",
                  values: [7, 6, 3, 4],
              },
              {
                  name: "Data 3",
                  values: [12, 278, 0, 0],
              },
          ],
      };
  },
}

3.所有默认组件道具。

// 'bar', 'column', 'area', 'line'
type: { type: String, required: true, },
height: { type: [String, Number], },
heading: { type: String, required: true, },
headingSize: { type: String, default: "1rem", },
showHeading: { type: Boolean, default: false, },
labels: { type: Array, required: true, },
showLabels: { type: Boolean, default: false, },
dataSpacing: { type: Number, default: 0, },
hideData: { type: Boolean, default: false, },
showDataAxis: { type: Boolean, default: false, },
showDataOnHover: { type: Boolean, default: false, },
datasets: { type: Array, required: true, },
showLegend: { type: Boolean, default: false, },
legendInline: { type: Boolean, default: true, },
legendType: { type: String, default: "square", },
showTooltips: { type: Boolean, default: false, },
resolveDataTooltip: {
  type: Function,
  default: (value, label, datasetName, rowIndex, colIndex, hasMultipleDatasets = false) => {
      return ( datasetName && hasMultipleDatasets ? datasetName : label ) + ": " + value;
  },
},
reverse: { type: Boolean, default: false, },
stacked: { type: Boolean, default: false, },
classes: { type: String, },
color: { type: String, default: null, },
formatDataValue: { type: Function, default: (value) => value },
resolveDataColor: {
  type: Function,
  default: (value, label, datasetName, rowIndex, colIndex, hasMultipleDatasets = false) => null,
},