ChartJS使用-环境搭建（vue）

最新推荐文章于 2025-03-20 15:19:16 发布

缘如风

最新推荐文章于 2025-03-20 15:19:16 发布

阅读量678

点赞数

分类专栏： VueJS 文章标签： vue.js 前端 javascript chartjs

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/132709371

版权

VueJS 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Chart.js，一个强大的JavaScript图表库，支持TypeScript并兼容多种框架。详细讲解了如何在Vue项目中安装和使用Chart.js，包括Bar组件的实现和配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、介绍

Chartjs简约不简单的JavaScript的图表库。官网https://chart.nodejs.cn/

Chart.js 带有内置的 TypeScript 类型，并与所有流行的 JavaScript 框架兼容，包括 React 、Vue 、Svelte 和 Angular 。你可以直接使用 Chart.js 或利用维护良好的封装程序包，以便与你选择的框架进行更原生的集成。

集成的相关

集成 | Chart.js 中文网

Vue中集成

GitHub - apertureless/vue-chartjs: 📊 Vue.js wrapper for Chart.js

以下是利用vue中集成使用

2、安装

pnpm add vue-chartjs chart.js
# or
yarn add vue-chartjs chart.js
# or
npm i vue-chartjs chart.js

3、实现Bar

<template>
  <div class="barClass" style="width:400px, height:400px">
    <Bar   :data="data" :options="options"></Bar>
  </div>
</template>

<script setup>

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement
} from 'chart.js'

ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement,Title, Tooltip, Legend)

import { Bar } from 'vue-chartjs'

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [{
    data: [40, 20, 12], 
    label: 'Data One',
    backgroundColor: '#f87979',
  },
  {
    data: [4, 30, 22], 
    label: 'Data Two',
    backgroundColor: '#007900',
  }
]
};

const options = {
  responsive: true
}

</script>

<style>

.barClass
{
  width: 600px;
  height: 400px;
  background-color: aqua;
}

</style>