Vue 2/3 Chart.js 3+

Vue 2/3  Chart.js  3+
插件名称 vue-chart-3
发布时间 2021年11月26日
插件作者 victorgarciaesgi

这是apertureless 的vue-chartjs的重写版本,可以轻松创建基于Chart.js 3+ 的图表组件。

安装和下载:

# Yarn
$ yarn add vue-chart-3

# NPM
$ npm i vue-chart-3 --save

使用

1. 导入必要的资源。

import { computed, ref } from "vue";
import { DoughnutChart } from "vue-chart-3";
import { Chart, ChartData, ChartOptions, registerables } from "chart.js";

2. 注册组件。

Chart.register(...registerables);

3. 创建一个圆环图。

<DoughnutChart ref="doughnutRef" :chartData="testData" :options="options" />
export default {
  name: "App",
  components: { DoughnutChart },
  setup() {
    const dataValues = ref([30, 40, 60, 70, 5]);
    const toggleLegend = ref(true);
    const doughnutRef = ref();
    const testData = computed<ChartData<"doughnut">>(() => ({
      labels: ["Paris", "Nîmes", "Toulon", "Perpignan", "Autre"],
      datasets: [
        {
          data: dataValues.value,
          backgroundColor: [
            "#77CEFF",
            "#0079AF",
            "#123E6B",
            "#97B0C4",
            "#A5C8ED",
          ],
        },
      ],
    }));
    const options = computed<ChartOptions<"doughnut">>(() => ({
      scales: {
        myScale: {
          type: "logarithmic",
          position: toggleLegend.value ? "left" : "right",
        },
      },
      plugins: {
        legend: {
          position: toggleLegend.value ? "top" : "bottom",
        },
        title: {
          display: true,
          text: "Chart.js Doughnut Chart",
        },
      },
    }));
    return {
      testData,
      options,
      doughnutRef,
    };
  },
};

4.可用道具。

options: { type: Object as PropType<ChartOptions<TType>>, required: false },
chartId: { default: chartId, type: String },
width: { default: 400, type: Number },
height: { default: 400, type: Number },
cssClasses: { type: String, default: '' },
styles: { type: Object as PropType<StyleValue> },
plugins: { type: Array as PropType<Plugin[]>, default: () => [] },
chartData: { type: Object as PropType<ChartData<TType>>, required: true },
onLabelsUpdate: { type: Function as PropType<() => void> },
onChartUpdate: { type: Function as PropType<(chartInstance: Chart<TType>) => void> },
onChartDestroy: { type: Function as PropType<() => void> },
onChartRender: { type: Function as PropType<(chartInstance: Chart<TType>) => void> },