插件简介

chart.js是一个优秀的开源图表处理插件，内置条形，折现，雷达，时间刻度等等图表渲染。

安装

chart.js官网.
我这里使用2019年3月4日发布的2.8版本.

下载之后拷贝dist文件夹，我改名为charts
得到

基础写法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Chart使用</title></head><body><script src="charts/Chart.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="charts/Chart.css" /><div style="height: 400px; width: 400px;"><canvas id="myChart"></canvas></div><script>var ctx = document.getElementById('myChart').getContext('2d');//声明绘制2d对象var myChart = new Chart(ctx, {//绑定标签并渲染type: 'bar',//声明为条形图bardata:{labels: ['红', '篮', '黄', '绿', '紫', '橙'],//labels:标签名datasets: [{//数据集label: ['选项'],//data: [12, 19, 3, 5, 2, 8],backgroundColor: [//背景颜色，透明度'rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.9)'],borderColor: [//线条颜色'rgba(255, 99, 132, 2)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 9)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],borderWidth: 1//线条粗细}]},options: {//配置项maintainAspectRatio: true,//相应式选项onHover: function(){//alert("我是鼠标移入移出事件");},onClick: function(){alert("我是点击事件");},scales: {yAxes: [{ticks: {beginAtZero: true//值是否从0开始递增}}]}}});</script></body></html>

进阶写法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Chart使用</title></head><body><script src="charts/Chart.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="charts/Chart.css" /><div style="height: 400px; width: 400px;"><canvas id="myChart"></canvas></div><script>var barData={//新建dataset对象labels: ['我是选项1','我是选项2','我是选项3','我是选项4','我是选项5','我是选项6','我是选项7'],datasets: [{label: '对学员出勤的检查与管理',backgroundColor: 'rgba(256, 255, 132, 0.2)',borderWidth: 1,data: [199,192,174,492,699,799,199]}, {label: '巡班并制止学员违纪现象',backgroundColor: 'rgba(255, 99, 132, 0.2)',borderWidth: 1,data: [199,192,174,492,699,799,199]}]}var ctx = document.getElementById('myChart').getContext('2d');//声明绘制2d对象var myChart = new Chart(ctx, {//绑定标签并渲染type: 'bar',//声明为条形图bardata: barData,options: {//配置项maintainAspectRatio: true,//是否响应式选项onHover: function(){//alert("我是鼠标移入移出事件");},onClick: function(){alert("我是点击事件");},scales: {yAxes: [{ticks: {beginAtZero: true//值是否从0开始递增}}]}}});</script></body></html>

效果图

AJAX获取数据
这里本人使用vue异步刷新

<script type="text/javascript">new Vue({el: '#sel',data: {map:{}},methods: {ajaxGetDetail: function(gid){}}
this.$http.post("/ajaxGetDetail",{gid:gid},{emulateJSON:true}).then(function(res){this.map=res.body;//map为已定义的对象，键值对应lables和datavar labels=[];var data=[];myChartData = {//初始化数据labels: labels,datasets: [{data: data,backgroundColor: "rgba(255, 99, 132, 0.2)",borderWidth: 1}]}for (var key in this.map.map){//将数据储存labels.push(key)data.push(this.map.map[key])}myChartData.datasets.forEach(function(datasets) {//循环判断data的值是否小于4，小于4改变颜色datasets.backgroundColor = datasets.data.map(function(data) {return data < 4 ? 'rgba(255, 99, 132, 0.2)' : 'rgba(102, 174, 255, 0.2)';});});myChart.data = myChartData; //重新赋值window.myChart.update(); //更新视图},function(res){console.log("请求失败处理")})
})</script>

Chart.js使用及ajax获取数据相关推荐

vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
(vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
BOS项目02_02_zTree-通过ajax的获取菜单数据、监听树形菜单的点击事件、读取json文件、Ajax获取数据
系列文章目录文章目录系列文章目录前言一.发送ajax网络请求获取菜单数据二.监听树形菜单的点击事件总结前言一.发送ajax网络请求获取菜单数据我们现在的数是写死的,那么实际项目中我们 ...
通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
Datatables学习（二）ajax获取数据
上一篇文章,讲解了datatables的基本创建,这一讲讲解datatables通过ajax异步获取数据 1.前提准备以一个图书管理的表格为例,后台java代码就不细说了,这里主要讲解前端数据库表 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
ajax 微信code获取_获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "= ...
ajax获取数据中文乱码问题最简单的完美解决方案
ajax获取数据中文乱码问题最简单的完美解决方案参考文章: (1)ajax获取数据中文乱码问题最简单的完美解决方案 (2)https://www.cnblogs.com/konglxblog/p/1 ...

Chart.js使用及ajax获取数据

图表插件Chart.js使用

插件简介

安装

Chart.js使用及ajax获取数据相关推荐

最新文章

热门文章