Chart.js报表制作

最新推荐文章于 2020-12-29 16:27:43 发布
最新推荐文章于 2020-12-29 16:27:43 发布
阅读量699 收藏 1
点赞数
分类专栏： Chart.js 文章标签： Chart.js 报表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kiss_Mark/article/details/47005619
版权
  1. 需要引入Chart.js  

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发货趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.         var barChartData = {  
  13.             labels : [ "7月20日", "7月21日", "7月22日", "7月23日", "7月24日", "7月25日",  
  14.                     "7月26日" ],  
  15.             datasets : [ {  
  16.                 fillColor : "rgba(220,220,220,0.5)",  
  17.                 strokeColor : "rgba(220,220,220,1)",  
  18.                 data : [ 65, 59, 90, 81, 56, 55, 40 ]  
  19.             }, {  
  20.                 fillColor : "rgba(151,187,205,0.5)",  
  21.                 strokeColor : "rgba(151,187,205,1)",  
  22.                 data : [ 28, 48, 40, 19, 96, 27, 100 ]  
  23.             } ]  
  24.         };  
  25.   
  26.       
  27.         var ctx = document.getElementById("bar").getContext("2d");  
  28.         var myNewChart = new Chart(ctx).Bar(barChartData);  
  29.         //new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);  
  30.     </script>  
  31. </body>  
  32. </html>  

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = {  
  13.             labels : ["January","February","March","April","May","June","July"],  
  14.             datasets : [  
  15.                 {  
  16.                     fillColor : "rgba(220,220,220,0.5)",  
  17.                     strokeColor : "rgba(220,220,220,1)",  
  18.                     pointColor : "rgba(220,220,220,1)",  
  19.                     pointStrokeColor : "#fff",  
  20.                     data : [65,59,90,81,56,55,40]  
  21.                 },  
  22.                 {  
  23.                     fillColor : "rgba(151,187,205,0.5)",  
  24.                     strokeColor : "rgba(151,187,205,1)",  
  25.                     pointColor : "rgba(151,187,205,1)",  
  26.                     pointStrokeColor : "#fff",  
  27.                     data : [28,48,40,19,96,27,100]  
  28.                 }  
  29.             ]  
  30.         };  
  31.   
  32.       
  33.         var ctx = document.getElementById("bar").getContext("2d");  
  34.         var myNewChart = new Chart(ctx).Line(data);  
  35.           
  36.     </script>  
  37. </body>  
  38. </html>  
[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = {  
  13.             labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],  
  14.             datasets : [  
  15.                 {  
  16.                     fillColor : "rgba(220,220,220,0.5)",  
  17.                     strokeColor : "rgba(220,220,220,1)",  
  18.                     pointColor : "rgba(220,220,220,1)",  
  19.                     pointStrokeColor : "#fff",  
  20.                     data : [65,59,90,81,56,55,40]  
  21.                 },  
  22.                 {  
  23.                     fillColor : "rgba(151,187,205,0.5)",  
  24.                     strokeColor : "rgba(151,187,205,1)",  
  25.                     pointColor : "rgba(151,187,205,1)",  
  26.                     pointStrokeColor : "#fff",  
  27.                     data : [28,48,40,19,96,27,100]  
  28.                 }  
  29.             ]  
  30.         };  
  31.   
  32.       
  33.         var ctx = document.getElementById("bar").getContext("2d");  
  34.         var myNewChart = new Chart(ctx).Radar(data);  
  35.           
  36.     </script>  
  37. </body>  
  38. </html>  
[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = [  
  13.                 {  
  14.                     value : 30,  
  15.                     color: "#D97041"  
  16.                 },  
  17.                 {  
  18.                     value : 90,  
  19.                     color: "#C7604C"  
  20.                 },  
  21.                 {  
  22.                     value : 24,  
  23.                     color: "#21323D"  
  24.                 },  
  25.                 {  
  26.                     value : 58,  
  27.                     color: "#9D9B7F"  
  28.                 },  
  29.                 {  
  30.                     value : 82,  
  31.                     color: "#7D4F6D"  
  32.                 },  
  33.                 {  
  34.                     value : 8,  
  35.                     color: "#584A5E"  
  36.                 }  
  37.             ];  
  38.   
  39.       
  40.         var ctx = document.getElementById("bar").getContext("2d");  
  41.         var myNewChart = new Chart(ctx).PolarArea(data);  
  42.           
  43.     </script>  
  44. </body>  
  45. </html>  
[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = [  
  13.                 {  
  14.                     value: 30,  
  15.                     color:"#F38630"  
  16.                 },  
  17.                 {  
  18.                     value : 50,  
  19.                     color : "#E0E4CC"  
  20.                 },  
  21.                 {  
  22.                     value : 100,  
  23.                     color : "#69D2E7"  
  24.                 }             
  25.             ];  
  26.   
  27.       
  28.         var ctx = document.getElementById("bar").getContext("2d");  
  29.         var myNewChart = new Chart(ctx).Pie(data);  
  30.           
  31.     </script>  
  32. </body>  
  33. </html>  
[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = [  
  13.                 {  
  14.                     value: 30,  
  15.                     color:"#F7464A"  
  16.                 },  
  17.                 {  
  18.                     value : 50,  
  19.                     color : "#E2EAE9"  
  20.                 },  
  21.                 {  
  22.                     value : 100,  
  23.                     color : "#D4CCC5"  
  24.                 },  
  25.                 {  
  26.                     value : 40,  
  27.                     color : "#949FB1"  
  28.                 },  
  29.                 {  
  30.                     value : 120,  
  31.                     color : "#4D5360"  
  32.                 }  
  33.   
  34.             ];  
  35.         var ctx = document.getElementById("bar").getContext("2d");  
  36.         var myNewChart = new Chart(ctx).Doughnut(data);  
  37.           
  38.     </script>  
  39. </body>  
  40. </html>  
Kiss_Mark
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
chart.js统计报表
01-20
曲线图，饼状图带文字，环形图带进度
Java Kiss-开源
04-25
主要目标是为网站的快速开发提供简单快速的框架。 保持简单-是一种通用方法。 JKISS还拥有子项目DBeaver-数据库管理器工具。 有关所有信息和新闻，请访问http://dbeaver.jkiss.org
产品中的KISS原则
我的E家
12-07 1144
KISS原则 即keep it simple, stupid。 直译：保持简单，让傻瓜都懂。 ps : 突然想起了利郎男装的广告语，觉得用到kiss原则上，也很贴切：简约不简单。取舍之间张显智慧。多则惑，少则明。把简单的事复杂化是容易的，但把复杂的事情简单化，则是最困难的。 对产品设计和体验的Kiss 对于一个产品需求，随着需要的不断增加，实现的功能那是越来越多，功能全对产品来说是必要的。
Chart.js使用（一）
waltzlhy的博客
12-14 4757
Chart.js使用最近在使用Chart.js做一些报表数据展示，最早看的是Chart.js对应的中文文档，不过发现在调试过程中有各种报错。仔细看了一下，发现中文文档对应的版本内容可能和现在使用的版本不一致导致的。这里记录一下使用时的一些内容，防止下次使用的时候忘记了。
Chart.js图形报表
04-28
基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制...
chartjs-plugin-zoom:Chart.js的缩放和平移插件
04-27
chartjs-plugin-zoom Chart.js> = 3.0.0的缩放和平移插件 为了获得Chart.js 2.6.0至2.9.x的支持，请使用 。 平移可以通过鼠标或手指来完成。 缩放是通过鼠标滚轮或捏合手势完成的。 用于手势识别。 文献资料 您...
chartjs-chart-timeline:类似于Google的Chart.js时间线图
04-29
chartjs图表时间线Chart.js的时间线图表库。 import Chart from 'chart.js' ;"type" : "timeline" ,"options" : { // Depricated and will be removed in future. Please use elements.* instead. // "colorFunction...
chartjs-adapter-luxon:用于Chart.js的Luxon适配器
05-02
chartjs-adapter-luxon 概述 此适配器允许将Luxon与Chart.js一起使用。 Luxon为时区和国际化提供内置支持。 需要 2.8.0或更高版本以及 1.0.0或更高版本。 注意：一旦加载，此适配器将覆盖Chart.js中提供的默认日期...
qtchartjs：Chart.js实验性QML集成
02-05
QtChartJs 有关更多详细信息，访问 实验性/不稳定/缓慢/未测试/无支持 请勿在生产中使用 安装 qmake qtchartjs.pro make make install ... Chart { anchors.fill: parent anchors.margins: 32 ty
数据可视化(1)--Chart.js
weixin_34162228的博客
12-11 222
Chart.js是一个HTML5图表库，使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中，还包含了大量的自定义选项，包括动画展示形式。 Chart.js比较轻量（gzip版本仅4.5k），且不依赖其他库。 项目官网：http://www.chartjs.org/ 曲线图（Line chart） &lt;!doctype html&g...
js折线图设置y轴刻度_javascript – 在chart.js中绘制折线图仅在值更改时放置点
weixin_39969448的博客
12-29 521
我正在使用chart.js在我的页面中使用图表我在x轴上的日期与我的y轴值(成本)有关.我想保持折线图继续其值,直到有变化并为此编码.这是输出在此标记为值是否相同我绘制了点.我可以选择删除所有点,但如果值与之前相同,我想删除点.(没有变化).我想知道这是否可行.如果请指导我如何去做？它与重复标记不一样……我希望它们是真实的或基于价值而变化.如果值为零或与之前相同,则不显示点这是我的代码as.das...
Chart.js 中文文档
第7维度 - 日常笔记
03-12 4775
Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。步骤：1、在HTML中引入Chart.js文件&lt;script src="Chart.js"&gt;&lt;/script&gt;2、在body内使用canvas，设置ID以及相应样式&lt;canvas id="myChart" width="400" height="400"&gt;&lt;
spring面试题 对DI , AOP概念的理解
itcast123的专栏
07-23 659
spring 的优点？ 1.降低了组件之间的耦合性 ，实现了软件各层之间的解耦 2.可以使用容易提供的众多服务，如事务管理，消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术，利用它很容易实现如权限拦截，运行期监控等功能 5.容器提供了众多的辅助类，能加快应用的开发 6.spring对于主流的应用框架提供了集成支持，如hibernate，JPA，Struts等 7.spring属于低侵...
Java 单例模式
kiss_vicente的专栏
08-24 1162
Java Singleton模式主要作用是保证在Java应用程序中，一个类Class只有一个实例存在。 使用Singleton的好处还在于可以节省内存，因为它限制了实例的个数，有利于Java垃圾回收（garbage collection）。   我们在浏览BBS、SNS网站的
java 时间与字符串之间的转换
热门推荐
kiss_the_sun的专栏
09-28 8万+
1. long字符串转换成yyyy-MM-dd HH:mm:ss格式输出 import java.text.SimpleDateFormat; import java.util.Date; //将long字符串转换成格式时间输出 public class LongToStrin
java简单基础知识
kiss_scarecrow的博客
08-05 236
作为程序员要求掌握最基本的windows相关DoS命令: *DOs命令在哪里编写? 在DOS命令窗口当中编写Dos命令 * DOS命令窗口怎么打开呢? 开始菜单-->运行-->输入cmd-->回车[默认打开的是黑色的命令窗口，这就是Dos窗口] *常见的DOS命令? -exit退出当前Dos命令窗口 - cls清屏 - Dos窗口中的内容怎么复制: 在DOS窗口的任意位置，点击鼠标右键，然后选择标记， 接下来选中要复制的内容，在DOS窗口的任意位置点击鼠标右键， 此时被复制的内容已经到剪贴
Bootstrop统计图表插件Chart.js简单使用
南窗寄傲琴书消忧的博客
02-27 6195
Bootstrop统计图表插件Chart.js的介绍以及简单使用方式在项目中关于数据方面难免要生成报表，曲线图，柱状图，蛛网图等一些图表以便于观察数据走势，在做相应网站的时候肯定会用到，学习记录！ 准备 Chart.js或者是Chart.bundle.js 如果考虑浏览器兼容还需下载 excanvas.js 下载地址 https://github.com/nnnick/Chart.js chart.
chart.js操作实例（前后台互通）
Kiss_Mark的博客
07-22 3117
前提：需要导入chart.js             我的项目环境是：SpringMVC+mongodb SpringMVC的controller层： [java] view plaincopy /**      * 查询得到财务信息报表      * @author liupeng      * @param request      * @return      
下载了chart.js文件在Django项目static\JS\chart\node_modules\chart.js\dist\chart.js路径下，如何在HTML中使用chart.js画图
最新发布
08-26
3. 在你的JavaScript文件中，使用以下代码来获取对`<canvas>`元素的引用，并通过Chart.js创建图表： ```javascript // 获取对canvas元素的引用 var ctx = document.getElementById('myChart').getContext('2d'); //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值