使用Vue.js 和Chart.js制作绚丽多彩的图表

前言

深入学习 chart.js 的选项来制作漂亮的图表。交互式图表可以给你的数据可视化提供很酷的展示方式。但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表。

这篇文章中,我会教你如何自定义 chart.js 选项来制作很酷的图表。

? Quick Start

我们需要:

  • Vue.js
  • vue-chart.js
  • vue-cli

使用 vue-cli 来搭基本架构,希望你已经安装好了。我们使用 vue-chart.js 来作为 chart.js 的打包器。

vue init webpack awesome-charts

然后到工程目录中安装依赖:

cd awesome-charts && yarn install

添加 vue-chartjs:

yarn add vue-chartjs -S

第一个图表

现在我们来创建第一个折现表。

touch src/components/LineChart.js && subl .

现在需要从 vue-chartjs 中引入折线表的基表,创建组件。

在 mount() 函数中使用我们准备好的数据和选项来调用 renderChart()方法。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

import {Line} from ‘vue-chartjs‘

export default Line.extend({

mounted () {

this.renderChart({

labels: [‘January‘, ‘February‘, ‘March‘, ‘April‘, ‘May‘, ‘June‘, ‘July‘],

datasets: [

{

label: ‘Data One‘,

backgroundColor: ‘#FC2525‘,

data: [40, 39, 10, 40, 39, 80, 40]

},{

label: ‘Data Two‘,

backgroundColor: ‘#05CBE1‘,

data: [60, 55, 32, 10, 2, 12, 53]

}

]

}, {responsive: true, maintainAspectRatio: false})

}

})

代码中,使用了一些实例数据和可选参数传递给 chart.js 的数据对象,并且设置 responsive:true,使得图表会充满外层容器。

之所以可以使用 renderChart() 方法是因为我们继承了 BaseChart,这个方法和一些属性都是在 BaseChart 中定义的。

运行 & 测试

ok,现在从 App.vue 中把 Hello.vue 删掉,并且引入我们的图表:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<template>

<div id="app">

<div class="container">

<div class="Chart__list">

<div class="Chart">

<h2>Linechart</h2>

<line-example></line-example>

</div>

</div>

</div>

</div>

</template>

<script>

import LineExample from ‘./components/LineChart.js‘

export default {

name: ‘app‘,

components: {

LineExample

}

}

</script>

<style>

#app {

font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

.container {

max-width: 800px;

margin: 0 auto;

}

</style>

CopyRaw

在终端中运行 dev 脚本,就可以看到图表了。

yarn run dev 

把我变得更漂亮

现在该做些美化工作了?? ,chart.js 中有很多很酷的技巧。可以传递一个十六进制的颜色数据到backgroundColor,也可以传递 rgba() 值,还可以设置颜色的透明度。chart.js 使用的是 html canvas 来绘图的,所以我们使用 createLinearGradient()。

从这里开始才是有趣的起点,使用它我们需要 canvas 对象。但这事并不难,vue-chartjs 中已经存在一个它的引用。我们可以使用 this.$refs.canvas 来访问。

在 LineChart.js 中,我们创建了两个变量来保存渐变。代码如下:


1

2

3

4

5

6

this.gradient = this.$refs.canvas

.getContext(‘2d‘)

.createLinearGradient(0, 0, 0, 450)

this.gradient2 = this.$refs.canvas

.getContext(‘2d‘)

.createLinearGradient(0, 0, 0, 450)

还有另外一个函数可以使用:addColorStop()

给每个渐变创建三个颜色点:


1

2

3

4

5

6

this.gradient.addColorStop(0, ‘rgba(255, 0,0, 0.5)‘)

this.gradient.addColorStop(0.5, ‘rgba(255, 0, 0, 0.25)‘);

this.gradient.addColorStop(1, ‘rgba(255, 0, 0, 0)‘);

this.gradient2.addColorStop(0, ‘rgba(0, 231, 255, 0.9)‘)

this.gradient2.addColorStop(0.5, ‘rgba(0, 231, 255, 0.25)‘);

this.gradient2.addColorStop(1, ‘rgba(0, 231, 255, 0)‘);

现在就可以把 this.gradient 传递给 backgroundColor了,可以得到一个很好看的渐变。为了得到更好的效果,还可以设置 borderColor 的颜色,alpha 设置成 1 (或者用十六进制也行),设置 borderWidth 为 1,另外还可以设置 pointColor。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

borderColor: ‘#FC2525‘,

pointBackgroundColor: ‘white‘,

borderWidth: 1,

pointBorderColor: ‘white‘,

import {Line} from ‘vue-chartjs

export default Line.extend({

data () {

return {

gradient: null,

gradient2: null

}

},

mounted () {

this.gradient = this.$refs.canvas.getContext(‘2d‘).createLinearGradient(0, 0, 0, 450)

this.gradient2 = this.$refs.canvas.getContext(‘2d‘).createLinearGradient(0, 0, 0, 450)

this.gradient.addColorStop(0, ‘rgba(255, 0,0, 0.5)‘)

this.gradient.addColorStop(0.5, ‘rgba(255, 0, 0, 0.25)‘);

this.gradient.addColorStop(1, ‘rgba(255, 0, 0, 0)‘);

this.gradient2.addColorStop(0, ‘rgba(0, 231, 255, 0.9)‘)

this.gradient2.addColorStop(0.5, ‘rgba(0, 231, 255, 0.25)‘);

this.gradient2.addColorStop(1, ‘rgba(0, 231, 255, 0)‘);

this.renderChart({

labels: [‘January‘, ‘February‘, ‘March‘, ‘April‘, ‘May‘, ‘June‘, ‘July‘],

datasets: [

{

label: ‘Data One‘,

borderColor: ‘#FC2525‘,

pointBackgroundColor: ‘white‘,

borderWidth: 1,

pointBorderColor: ‘white‘,

backgroundColor: this.gradient,

data: [40, 39, 10, 40, 39, 80, 40]

},{

label: ‘Data Two‘,

borderColor: ‘#05CBE1‘,

pointBackgroundColor: ‘white‘,

pointBorderColor: ‘white‘,

borderWidth: 1,

backgroundColor: this.gradient2,

data: [60, 55, 32, 10, 2, 12, 53]

}

]

}, {responsive: true, maintainAspectRatio: false})

}

})

最后一步

最后一步是给 App.vue 的容器添加一些样式。


1

2

3

4

5

6

7

8

9

10

11

12

.Chart {

background: #212733;

border-radius: 15px;

box-shadow: 0px 2px 15px rgba(25, 25, 25, 0.27);

margin: 25px 0;

}

.Chart h2 {

margin-top: 0;

padding: 15px 0;

color: rgba(255, 0,0, 0.5);

border-bottom: 1px solid #323d54;

}

最终结果

最终结果如图:

英文连接:Creating stunning charts with Vue.js and Chart.js

原文地址:https://www.cnblogs.com/airen123/p/12100841.html

时间: 2024-10-13 04:16:34

使用Vue.js 和Chart.js制作绚丽多彩的图表的相关文章

Html5之高级-7 HTML5 Chart.js(概述、入门、使用)

一.Chart.js 概述 Chart.js 简介 - Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库 - 官方地址: http://www.chartjs.org/ Chart.js 特点 - 基于 HTML 5 - Chart.js 基于 HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案 - 简单.灵活 - Chart.js 不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法 Chart.js

chart.js简单的图标绘制工具

   前 言 chart.js Chart.js帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上. Chart.js基于HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案. Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法. 1导入Chart.js文件 <script src="Chart.js"></script>

chart.js图表库案例赏析,饼图添加文字

chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB. 前天用了一下,由于以前也稍微用过,今天总结了一下(水平有限,如果问题,请不吝赐教): 开发中文文档:http://www.bootcss.com/p/chart.js/docs/ ch

js 统计图插件chart.js

chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src="<%=path%>/js/mapping/Chart.js"></script> 第二步绘制控件 样式可以自己定义但是id不能改变 <canvas id="canvas"  height="600" width="

Chart.js: 一个简单的 JS Chart Library

Chart.js 是一个 Open Source 的 JavaScript Chart Library.它一共有 6 中 Chart,全都是 HTML5 based. 底下是 Chart.js 所提供的 6 中 Charts的实例图形,包括了折线图.柱形图.圆饼图等,这样很容易在html网页中实现动态图的效果: Line Chart Bar Chart Radar Chart Pie Chart Polar Area Chart Doughnut Chart 快速上手 你可以到 github下载

vue.js 图表chart.js使用

在使用这个chart.js之前,自己写过一个饼图,总之碰到的问题不少,所以能用现成的插件就用,能节省不少时间 这里不打算介绍chart.js里面详细的参数意义和各个参数的用法,只作为首次使用chart.js的一个入门级的说明! 在使用之前,我找到了一个中文的chart.js的文档地址:http://www.bootcss.com/p/chart.js/docs/,打开后发现除了菜单是中文的,其他还是英文的,这个可能是从官方直接扒下来的版本,很久没更新了,部分参数和官方已经差距很大,还是直接看官方

Chart.js报表制作

需要引入Chart.js <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <title>报表</title> <script src="js/Chart.js"></script> </head> <body> <l

chart.js

一款基于html5的统计图片插件,它可以简单快捷的制作出多种形状的非常漂亮且直观的统计图,当然,这么实用的工具必须得支持主流的浏览器,后面会说到如何让低版的浏览器也支持.在这里还有一点说明,jQ酷只做与jquery相关的插件或文章,但这个让我破例了,因为它太强大了,虽与jquery没有半毛钱的关系,但还是要拿出来和大家分享下,下面我们来开始使用它. 引入Chart.js <script src="Chart.js"></script 建立HTML <canvas

Chart.js在Laravel项目中的应用

本文为转载,原文:Chart.js在Laravel项目中的应用 介绍 Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等, 本文将介绍如何在laravel项目中使用chart.js 安装 可以通过以下命令在 npm 或 bower 中来安装chart.js. npm install chart.js --save bower install chart.js --save 可以在你的项目中使用 CDN link. h