Menu
Woocommerce Menu

非常实用的Javascript统计图demo示例,使用心得分享

0 Comment

Highcharts 官网:
Highcharts 官网示例:
Highcharts
官网文档:
官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可。
下面是一个学生成绩走势demo:
图片 1 

最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo,
没一个可靠的,全都无法显示出来。像对于我们习惯用C++的coder来说,EXTJS简直就是一群无政府土匪来维护的,官网上连个搜索框都没有,找资料基本靠遍历,还是人工的。

复制代码 代码如下:

复制代码 代码如下:

使用treegrid,需要在调用页面的head中加载以下几个文件:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
 <html xmlns=”;
 <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>计算器</title>
<script language=”javascript” type=”text/javascript”>
 var clearFlag=false;
 function getNum(num){
 //alert(num);
  var objresult=document.getElementById(“result”);
  if(clearFlag){
   objresult.value=””;
   clearFlag=false;
  }
 //alert(objresult);
 objresult.value+=num;
 }
function getResult(){
 var objresult=document.getElementById(“result”);
 objresult.value=objresult.value+”=”+eval(objresult.value);
 clearFlag=true;
}
</script>
</head>
<body>
<table width=”200″ border=”1″ cellpadding=”2″>
  <tr>
    <td colspan=”4″><input type=”text” name=”result”
id=”result” size=”33″></td>
  </tr>
  <tr>
    <td width=”56″><input type=”button” value=”  1   ”
onclick=”getNum(1)”></td>
    <td width=”56″><input type=”button” value=”  2   ”
onclick=”getNum(2)”></td>
    <td width=”51″><input type=”button” value=”  3   ”
onclick=”getNum(3)”></td>
    <td width=”58″><input type=”button” value=”  +   ”
onclick=”getNum(‘+’)”></td>
  </tr>
  <tr>
    <td><input type=”button” value=”  4   ”
onclick=”getNum(4)”></td>
    <td><input type=”button” value=”  5   ”
onclick=”getNum(5)”></td>
    <td><input type=”button” value=”  6   ”
onclick=”getNum(6)”></td>
    <td><input type=”button” value=”  –   ”
onclick=”getNum(‘-‘)”></td>
  </tr>
  <tr>
    <td><input type=”button” value=”  7   ”
onclick=”getNum(7)”></td>
    <td><input type=”button” value=”  8   ”
onclick=”getNum(8)”></td>
    <td><input type=”button” value=”  9   ”
onclick=”getNum(9)”></td>
    <td><input type=”button” value=”  *   ”
onclick=”getNum(‘*’)”></td>
  </tr>
  <tr>
    <td><input type=”button” value=”  0   ”
onclick=”getNum(0)”></td>
    <td><input type=”button” value=”  .   ”
onclick=”getNum(‘.’)”></td>
    <td><input type=”button” value=”  =   ”
onclick=”getResult()”></td>
    <td><input type=”button” value=”  /   ”
onclick=”getNum(‘/’)”></td>
  </tr>
</table>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
<title>Highcharts Example</title>
<script type=”text/javascript”
src=”;
<script type=”text/javascript”>
$(function () {
$(‘#container’).highcharts({
chart: {
type: ‘spline’
},
title: {
text: ‘初三第一学期’
},
xAxis: {

复制代码 代码如下:

PS:这里再为大家推荐两款本站的在线计算器,都是采用js实现,且功能强大,相信对于大家深入了解JavaScript数学运算及web设计会有所帮助:

type: ‘datetime’,
labels: {
formatter: function() {
return Highcharts.dateFormat(‘%Y-%m-%d’, this.value);
}
}
},
yAxis: {
title: {
text: ‘分数’
},
min: 0
},
tooltip: {
//这种模式下,每点的tooltip单独显示
shared: false,
formatter: function() {
var s = ‘<b>’+ this.point.name +'</b>’+'<br/>’+
Highcharts.dateFormat(“%Y/%m/%d”, this.point.x) +’: ‘+this.point.y
+’分<br/>’;
return s;
}
/**
这种模式下,两个点的tooltip显示在一起
shared: true,
formatter: function() {
var s=”;
$.each(this.points, function(i, point) {
s += ‘<b>’+ point.key +'</b>’+'<br/>’+
Highcharts.dateFormat(“%Y/%m/%d”, point.x) +’: ‘+point.y
+’分<br/>’;
});
return s;
}
*/
},
series: [{
name: ‘英语’,
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February
etc.

<link rel=”stylesheet” type=”text/css” href=”css/ext-all.css”>
<script type=”text/javascript” src=”ext-all.js”></script>
<script type=”text/javascript” src=”treegrid.js”></script>

在线标准计算器:

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图