chatr.js 制作漂亮的图表

最新推荐文章于 2024-05-07 16:40:52 发布
最新推荐文章于 2024-05-07 16:40:52 发布
阅读量812 收藏
点赞数
分类专栏： js 文章标签： html
本文介绍了一个使用HTML、CSS和JavaScript实现的成绩图表展示案例。通过AJAX从服务器获取数据，并利用Chart.js库绘制柱状图，展示了A班的成绩分布情况。
  1. html代码
    1. <!DOCTYPE html>  
    2. <html lang="zh-cn">  
    3.   
    4. <head>  
    5.     <meta http-equiv="Content-Type" charset="UTF-8" />  
    6.     <title>案例显示</title>  
    7.     <!--     <link rel="stylesheet" href="../css/ranking.css" /> -->  
    8.   
    9.   
    10. <style type="text/css">  
    11.     *  
    12. {  
    13.     margin: 0px;  
    14.     padding: 0px;  
    15. }  
    16.   
    17. body  
    18. {  
    19.     background: #EEE;  
    20.     text-align:center;  
    21. }  
    22.   
    23. #drawCanvas  
    24. {  
    25.     background: white;  
    26.     border: 1px solid #CCC;  
    27. }  
    28. </style>  
    29. </head>  
    30.   
    31. <body>  
    32.     <script type="text/javascript" src="../js/Chart.js"></script>  
    33.         <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>  
    34.     <script type="text/javascript" src="../js/index.js"></script>  
    35.     <p>A班成绩表</p>  
    36.     <canvas id="myChart" width="600" height="400"></canvas>  
    37. </body>  
    38.   
    39. </html> 

数据格式

 { [

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"},

{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }

]}






  5. js代码
  6.  window.onload=function()  
  7. {  
  8.      getdatafromDB();  
  9. }  
  10.   
  11. var getdatafromDB = function(){  
  12.     $.ajax({  
  13.         url: "../php/index.php",  
  14.         type: "POST",  
  15.         dataType:"json",  
  16.          error: function(){    
  17.              alert('Error loading XML document');    
  18.          },    
  19.         success:function(data){  
  20.             console.info(data);  
  21.              bar(data);  
  22.         }  
  23.     });  
  24. }  
  25. function bar(Data)  
  26. {  
  27.     if(Data.length==null || Data.length == 0)  
  28.         return;  
  29.     var barData={};  
  30.     barData.labels=[];  
  31.     barData.datasets=[];  
  32.     var temData={};  
  33.     temData.data=[];  
  34.     temData.fillColor= "rgba(151,187,205,0.5)";  
  35.     temData.strokeColor = "rgba(151,187,205,0.8)";  
  36.     temData.highlightFill="rgba(151,187,205,0.75)",  
  37.     temData.highlightStroke= "rgba(151,187,205,1)";  
  38.       
  39.     for(var i=0;i<Data.length;i++)  
  40.     {  
  41.         barData.labels.push(Data[i].label);  
  42.         temData.data.push(Data[i].value);  
  43.     }  
  44.     barData.datasets.push(temData); //封装一个规定格式的barData。  
  45.     console.info(barData);  
  46.     /     /// 动画效果  
  47.     var options = {             
  48.         scaleOverlay: false,  
  49.         scaleOverride: false,  
  50.         scaleSteps: null,  
  51.         scaleStepWidth: null,  
  52.         scaleStartValue: null,    
  53.         scaleLineColor: "rgba(0,0,0,.1)",    
  54.         scaleLineWidth: 1,     
  55.         scaleShowLabels: true,  
  56.         scaleLabel: "<%=value%>",  
  57.         scaleFontFamily: "'Arial'",     
  58.         scaleFontSize: 12,  
  59.         scaleFontStyle: "normal",     
  60.         scaleFontColor: "#666",  
  61.         scaleShowGridLines: true,  
  62.         scaleGridLineColor: "rgba(0,0,0,.05)",  
  63.         scaleGridLineWidth: 1,  
  64.         bezierCurve: true,  
  65.         pointDot: true,  
  66.         pointDotRadius: 3,  
  67.         pointDotStrokeWidth: 1,  
  68.         datasetStroke: true,  
  69.         datasetStrokeWidth: 2,  
  70.         datasetFill: true,  
  71.         animation: true,  
  72.         animationSteps: 60,  
  73.         animationEasing: "easeOutQuart",                
  74.         onAnimationComplete: null  
  75.     }  
  76.     var ctx  = document.getElementById("myChart").getContext('2d');  
  77.     myChart = new Chart(ctx).Bar(barData,options, { //重点在这里  
  78.         responsive : true  
  79.     });  
  80. } 
JavaScript 可视化图表
Auscy的博客
07-16 610
掌握上述要点后，可根据具体业务场景选择合适的库和实现方案，从简单图表到复杂的仪表盘（Dashboard）均能高效完成。：ECharts（内置中国地图）、Leaflet（轻量地图引擎）。使用 Plotly.js 或 Three.js 实现。展示数据随时间或连续变量的变化趋势。：游戏角色属性、产品竞争力分析。比较不同类别数据的大小或数量。通过颜色深浅展示二维数据密度。：3D 曲面图、3D 散点图。探索变量间的关系或聚类模式。：网站点击热区、温度分布。比较多个维度的性能表现。展示数据的占比关系。
使用Chart.js绘制折线图
heheandxixi12138的博客
03-12 1628
1.新建一个WEB项目，在jsp页面中导入chart.js文件。PS：这里使用的是2.0版本 2.JSP中添加一个div块 &lt;div style="width:800px;height:260px;"&gt; &lt;canvas style="width:600px;height:200px;margin:auto;" id="chartCanvas"&gt;&lt;/canva...
js实现漂亮的table表格
07-27
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
JS实现漂亮的表格table特效代码
09-11
JS实现漂亮的表格table特效代码，四五种效果可选择哦
拼出漂亮的表格
bby_19的专栏
06-21 736
拼出漂亮的表格 分类： 蓝桥杯软件大赛编程题2013-06-21 09:15 151人阅读 评论(0) 收藏 举报 [java] view plaincopy package cn.dlpu.lby;      import java.util.Scanner;      /*拼出漂亮的表格   * 在中文Windows环境下
美观又实用，10款强大的开源Javascript图表库
weixin_34280237的博客
08-15 867
随着发展，现代 Web 设计在改善体验和功能的同时，对于美观的追求也越来越高，可视化、交互式、动态等元素和效果似乎已成为标配。 以下是为开发者推荐的 10 款开源 Javascript 图表库，可以帮助实现各种漂亮的功能。话不多说，直接开始吧! 1、ECharts ECharts 由百度前端技术部开发的，是一个纯 Javascript 的图表库，可以...
chatr:Babble Android SDK测试应用
05-09
CHATR：无服务器聊天 Chatr是一个演示应用程序，它使用Babble Mobile库使多个移动设备无需中央服务器即可聊天。 请继续关注有关Babble Mobile库的更多信息，以及如何使用它来构建由Babble支持的自己的应用程序。 ...
Chatr - AJAX Chat in PHP-开源
05-29
3. **前端开发**：Chatr 的前端部分主要由 HTML、CSS 和 JavaScript 组成。HTML 构建页面结构，CSS 用于美化界面，而 JavaScript 则是实现聊天功能的核心，它通过 AJAX 调用 PHP 接口，实现异步通信。 4. **用户...
CHATr w k v 插件解析
03-28
最近在get the Hobb上看到了一个名为CHATr w k v的项目，它是一个类似于叉的g p t的语言模型，可以提供续写和简单的对话问答功能，基于作者的r w k v模型实现，好像是魔改的r n n。项目使用的是酷是p y touch，虽然...
Chatrlet免费图表控件例子
06-25
3. 初始化图表：使用JavaScript编写代码，设置图表类型、数据源、配置项等，并调用Chatrlet的初始化方法。 4. 更新和交互：根据需要，你可以监听用户事件，动态改变图表内容或设置交互行为。 在提供的压缩包...
自己做的一个基于javascript和css的table表格模板，非常漂亮
11-23
自己做的一个基于javascript和css的table表格模板，非常漂亮,直接拿过来用就可以了
超级炫酷的后台界面，国外大神做的，各种图表，满足你的所有需求
06-17
做后台时候压箱底的宝贝资源，拿出来跟大家分享超级炫酷的后台界面，国外大神做的，各种图表，满足你的所有后台展示、统计需求...
做动画用jQuery，做炫酷的图表用d3.js
qq_15167261的博客
11-12 2109
d3.js和jQuery都有个相同之处，就是它们都是js界的著名工具库。但是它们所面对的领域不一样。 d3.js主要是做数据可视化的，也就是各种炫酷的图表，比如折线图、弦图、力导向图等等。而jQuery主要是做页面DOM控制、AJAX和动画的。
用JS写的一个好看的折线图
热门推荐
拿铁不懂绿茶
02-28 1万+
之前做移动端项目的时候，有要显示图表的需求， 但是由于设计师设计的太漂亮， 一般的第三方控件不加修改的话都不太满足， 如果引进了的话， 要修改的东西太多了， 也不好修改，废话不多说， 先上图：至于怎么实现了，其实也蛮简单的，canvas自己一个个画的。以下是源码：/** * Created by freeson on 2017/10/24. */ export const lineChart...
用 chart.js 创建漂亮图表 （HTML绘制工具库）
a519395243的博客
08-22 6091
chart.js ：开源免费图表组件，HTML绘制工具库。简单介绍chart组件的全部图形。
使用Chart.js创建漂亮的图表
01-07 213
内容为王 。 我们都听到或读到这句话，表达多么好的文本可以驱动的，因为搜索引擎的效果转换。 然而，虽然文字是优秀的搜索引擎，有时人们可以更好地通过看图片或图表理解的概念。 例如，如果你的网站是专门关于调查，有关的调查描述是重要的，但汇总调查的数据图表是为您的用户更强大。 在本文中，我将向你介绍所谓chart.js之一个JavaScript库，采用HTML5的canvas元素绘制在页面上的图表。...
前端数据可视化基础(折线图)
lh11223326的博客
05-07 3413
前端中的数据可视化是指将大量数据以图形或图像的形式在前端页面上展示出来，以便用户能够更直观地理解和分析这些数据。数据可视化是一种强大的工具，它利用了人类视觉系统的能力，使我们能够更容易地识别模式、趋势和关系，这在纯文本或数字表格中可能不太明显。数据展示：前端数据可视化最直接的作用是将复杂的数据集转换为直观的图形，如柱状图、折线图、饼图等。这些图形使得用户可以快速地获取数据的关键信息，而无需深入研究详细的数据集。交互性：前端数据可视化通常包含交互功能，如悬停提示、数据点点击事件、缩放和平移等。
使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
weixin_34320724的博客
04-10 190
本文作者：Jakub Juszczak编译：胡子大哈 翻译原文：http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35bb8e0英文连接：Creating stunning charts with Vue.js and Chart.js 转载请注明出处，保留原文链接以及作者信息 深入学习 cha...
winform的chatr控件
最新发布
03-19
为了让图表能够展示数据，必须为其指定一个合适的数据源。通常情况下，数据源是一个包含系列名称及其对应数值的集合。例如： ```csharp // 创建数据列表 List, double>> data = new List, double>> { new ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值