Chart.js绘图,数据图

首先下载需要引用的Chart.js文件

https://github.com/nnnick/Chart.js

也可以把整个文件夹都下载到本地，里面包含了一些demo

<html><head><meta charset="utf-8"><script type="text/javascript" src="js/chart/Chart.js"></script></head><body><canvas id="canvas" height="450" width="600"></canvas><script type="text/javascript">var ctx = new Chart(document.getElementById("canvas").getContext("2d"));var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};// 线型图var LineChart = {labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],datasets: [{fillColor: "rgba(151,249,190,0.5)",strokeColor: "rgba(255,255,255,1)",pointColor: "rgba(220,220,220,1)",pointStrokeColor: "#fff",data: [10, 20, 30, 40, 50]}, {fillColor: "rgba(252,147,65,0.5)",strokeColor: "rgba(255,255,255,1)",pointColor: "rgba(173,173,173,1)",pointStrokeColor: "#fff",data: [28, 68, 40, 19, 96]}]};var myLineChart = ctx.Line(LineChart, options);// 条形图var BarChart = {labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],datasets: [{fillColor: "rgba(151,249,190,0.5)",strokeColor: "rgba(255,255,255,1)",data: [13, 20, 30, 40, 50]}, {fillColor: "rgba(252,147,65,0.5)",strokeColor: "rgba(255,255,255,1)",data: [28, 68, 40, 19, 96]}]};//var myBarChart = ctx.Bar(BarChart, options);// 饼状图var pieChart = [{value: 40, color: "#fcc79c"},{value: 30, color: "#beefd2"},{value: 90, color: "#ffddfb"},];//var myPieChart = ctx.Pie(pieChart);// 环状图var doughnutChart = [{value: 60, color: "#fcc79e"},{value: 30, color: "#beefd2"},{value: 50, color: "#ffddfb"},{value: 120, color: "#cdecff"},{value: 90, color: "#fff5bc"}];//var myRingChart = ctx.Doughnut(doughnutChart);</script></body>
</html>

主要是chart.js引用到位就ok了，其他的根据自己需求来更改图标效果

Chart.js中文文档

http://www.bootcss.com/p/chart.js/docs/

Chart.js绘图,数据图相关推荐

SpringBoot整合chart.js完成数据可视化，展现数据趋势与变化！
SpringBoot整合chart.js完成数据可视化项目源码点击进入github获取源码一个搭好的SpringBoot微服务框架,简单整合了一些东西,前后端分离,后端只需要向前端提供JSON ...
chart.js ajax 折线图,如何在ChartJs 的折线图中显示数据值或索引标签
如何在Chartjs的折线图中显示数据值或索引值,如图所示: 图例.PNG 简介 Chart.js是一款不依赖任何外部js库的图标插件,具体的使用方法可查看Chart.js官网. 需求 Chart.j ...
java 实现雷达图,如何使用y轴为0到100的chart.js创建雷达图？
我目前正在使用Chart.js将我的数据显示为雷达图 . 我面临的问题是,每次我向页面添加数据时,它都会将最大值设置为表中最高值 . 我需要它从0到100的Y轴开始 . 我正在使用Chart.js v ...
html chart标签,用 Chart.js 画扇形图并显示标签
chart.js 扇形图 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = ...
chart.js使用学习——折线图（1：基本用法)
折线图,即在直角坐标系中用直线串起来的一系列点形成的图形.在excel.ppt等办公软件中经常见到折线图,应用系统中也有不少统计汇总功能以折线图形式展示.本文根据参考文献1-2学习chart.js ...
chart.js使用学习——雷达图
雷达图以二维形式综合对比多组数据的差异,常用于比较2组或更多组数据集[1].chart.js中雷达图的数据准备与其它图形相同,主要差异在于创建chart对象时,图形类型需指定为"rada ...
使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
本文作者:Jakub Juszczak 编译:胡子大哈翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35 ...
chart.js使用用法
下面的链接是不同的图的实例,请先看本文了解大概,再看不同的统计图的实现使用chart.js画折线图甜甜圈图和饼状图 chart.js使用用法定义画布 <canvas id="my ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...

Chart.js绘图,数据图

Chart.js绘图,数据图相关推荐

最新文章

热门文章