介绍
这篇文章将为大家详细讲解有关如何使用Vue。js和图表。js制作绚丽多彩的图表,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
js有什么特点 1, js属于一种解释性脚本语言;2,在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3,js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4,js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5,基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
<强> ?快速启动
我们需要:
<李> Vue.js
<李> vue-chart。李js
<李> vue-cli
使用vue-cli来搭基本架构,希望你已经安装好了。我们使用vue-chart。js来作为图表。js的打包器。
<代码> vue init webpack awesome-charts
然后到工程目录中安装依赖:
<代码> cd awesome-charts,,纱安装
添加vue-chartjs:
<代码>纱添加vue-chartjs - s
<强>第一个图表
现在我们来创建第一个折现表。
<代码> src/组件/LineChart联系。js和,subl。
现在需要从vue-chartjs中引入折线表的基表,创建组件。
在山()函数中使用我们准备好的数据和选项来调用renderChart()方法。
import {线},得到& # 39;vue-chartjs& # 39;
export default Line.extend ({
mounted (), {
this.renderChart ({
标签:,(& # 39;1 # 39;,,& # 39;2 # 39;,,& # 39;3 # 39;,,& # 39;4 # 39;,,& # 39;5 # 39;,,& # 39;6 # 39;,,& # 39;7 # 39;],
数据集:,
{
标签:& # 39;Data 一个# 39;
写成backgroundColor: & # 39; # FC2525& # 39;
数据:,(40岁,39岁,10岁,40岁,39岁,80年,40)
},{
标签:& # 39;Data 两个# 39;
写成backgroundColor: & # 39; # 05 cbe1& # 39;
数据:,(60岁,55岁,32岁,,,2,,12日,53)
}
]
},{响应:真的,,maintainAspectRatio:,假})
}
}) 代码中,使用了一些实例数据和可选参数传递给图。js的数据对象,并且设置响应:真的,使得图表会充满外层容器。
之所以可以使用renderChart()方法是因为我们继承了BaseChart,这个方法和一些属性都是在BaseChart中定义的。
<>强运行,测试
好的,现在从App.vue中把你好。vue删掉,并且引入我们的图表:
& lt; template>
& lt; div id=癮pp"祝辞
& lt; div 类=癱ontainer"祝辞
& lt; div 类=癈hart__list"祝辞
& lt; div 类=癈hart"祝辞
& lt; h3> Linechart
& lt; line-example> & lt;/line-example>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
import LineExample 得到& # 39;。/组件/LineChart.js& # 39;
export default {
名称:,& # 39;应用# 39;
组件:{
LineExample
}
}
& lt;/script>
& lt; style>
# app {
字体类型:& # 39;Avenir& # 39;,, Helvetica,, Arial,,无衬线;
-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
text-align:中心;
颜色:# 2 c3e50;
margin-top: 60 px;
}
.container {
max-width: 800 px;
保证金:0,汽车;
}
& lt;/style>
CopyRaw 在终端中运行dev脚本,就可以看到图表了。
<代码>纱线运行dev
<>强把我变得更漂亮
现在该做些美化工作了吗?,图。js中有很多很酷的技巧。可以传递一个十六进制的颜色数据到写成backgroundColor,也可以传递rgba()值,还可以设置颜色的透明度.chart。js使用的是html画布来绘图的,所以我们使用createLinearGradient ()。
从这里开始才是有趣的起点,使用它我们需要帆布对象。但这事并不难,vue-chartjs中已经存在一个它的引用。我们可以使用。美元。参考文献画布来访问。
在LineChart。js中,我们创建了两个变量来保存渐变。代码如下:
this.gradient =, refs.canvas美元
.getContext (“2 d # 39;
.createLinearGradient (0, 0, 0, 450)
时间=this.gradient2 refs.canvas美元
.getContext (“2 d # 39;
.createLinearGradient (0, 0, 0, 450) 还有另外一个函数可以使用:addColorStop ()
