12.6柱状图生成器

最新推荐文章于 2024-04-20 15:43:44 发布
最新推荐文章于 2024-04-20 15:43:44 发布
阅读量873 收藏
点赞数
分类专栏： js基础教程随书笔记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 #chartType{
  float:left;
  width:200px;
 }
 .vart{
  text-align:center;
  vertical-align:bottom;
 }
 th{
  font-size:16px;
  padding-left:20px;
  padding-right:15px;
 }
 .vert th{
  border-left:1px solid #000;
  border-bottom:1px #000 solid;
  padding-bottom:20px;
 }
 .horiz th{
  border-right:1px solid #000;
 }
 .horiz img{
  height:15px;
  vertical-align:bottom;
 }
 .vert img{
  width:15px;
  padding-left:10px;
  padding-right:10px;
 }

</style>
<script type="text/javascript">
 window.onload = initAll;
 function initAll(){
  var radioButtons = document.getElementsByTagName("input"); //获取页面所有input元素
  for(var i=0; i<radioButtons.length; i++){ //遍历所有input元素
   if(radioButtons[i].type == "radio"){ //如果元素节点类型为radio
     radioButtons[i].onclick = chgChart; //点击radiole类型的input元素掉用chgChart
   }
  }
  chgChart(); //页面默认视图
 };
 function chgChart(){
  var bChart = { //创建对象
   name : "Browser usage by year", //属性名：属性值字符串
   years : [1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009],//属性名：属性值数组
   fieldnames : ["Netscape/Mozilla","MS IE","Other"],//属性名：属性值数组
   fields: [ //属性名：属性值二维数组
    [38,931,921,2,12,4,6,6,5,1,3,1,611,14,17],
 [60,6,67,4,78,3,85,6,92,5,94,0,92,89,90,84,79,76],
 [0.5,0.5,0.5,2.1,0.9,1.0,4.9,3.5,5.6]
   ]
  };
  var jsChart = {
   name : "JavaScript usage by year",
   years : [1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009],
   fieldnames : ["1.2 or later","1.0-1.1","No JavaScript"],
   fields:[
    [63,4,66,5,78,480,2,88,1,89,1,94,89,96,95,94,93],
 [18,7,12,6,2,8,0,8,0,3,0,3,0,0,0,0,0,0],
 [17,9,21,0,18,8,19,0,11,6,10,6,4,9,3,4,5,6]
   ]
  };
  
  var radioButtons = document.getElementsByTagName("input"); //获取页面所有input元素
  var currDirection = getButton("direction"); //函数getButton传递参数字符串direction 并且函数返回值赋给currDirection变量
  var imgSrc = getButton("color");  //函数getButton传递参数字符串color  并且images/函数返回值赋给imgSrc
  if(getButton("type") == "browser"){ //如果名称为type的元素的值为browser
   var thisChart = bChart; //bChart对象赋值给thisChart
  }else{
   var thisChart = jsChart; //jsChart对象赋值给thisChart
  }
  var  chartBody = "<h2>"+thisChart.name+"</h2><table>"; //chartBody = <h2>通过对象属性名name获取对象属性值</h2>
  for(var i=0; i<thisChart.years.length; i++){ //遍历对象属性名为years的属性值
   if(currDirection == "horizontal"){ //如果currDirection值为函数getButton(buttonSet)返回值为horizontal 选中horizontal
    chartBody += "<tr class='horiz'><th rowspan = '4'>"+thisChart.years[i];
     /*chartBody = <h2>+thisChart.name+</h2> 当thisChart.name是对象bChart时 当i为1时候
                 <table>
      <tr class='horiz'>
        <th rowspan = '4'>+thisChart.years[i]   1999  
    */                                                                      
    chartBody  += "</th><td colspan='2'></td></tr>";
  /*chartBody = <h2>+thisChart.name+</h2>
                 <table>
      <tr class='horiz'>
        <th rowspan = '4'>thisChart.years[i]</th>    1999
                       <td><td colspan='2'></td>
      </tr>  
 */
 for(var j=0; j<thisChart.fieldnames.length;j++){//遍历对象属性名为fieldnames的属性值
  chartBody += "<tr class='horiz'><td>"+thisChart.fieldnames[j];
   /*chartBody = <h2>+thisChart.name+</h2> 当j为0的时候
                 <table>
      <tr class='horiz'>
        <th rowspan = '4'>thisChart.years[i]</th> 1999   
                       <td><td colspan='2'></td>
      </tr>  
                  <tr class='horiz'>
       <td>
        thisChart.fieldnames[j]  Netscape/Mozilla
 */
  chartBody += "</td><td><img src='"+imgSrc;
  /*chartBody = <h2>+thisChart.name+</h2>
                 <table>
      <tr class='horiz'>
        <th rowspan = '4'>thisChart.years[i]</th>    1999
                       <td><td colspan='2'></td>
      </tr>  
                  <tr class='horiz'>
       <td>
        thisChart.fieldnames[j] Netscape/Mozilla
       </td>
       <td>
        <img src=imgSrc
 */
 chartBody += "'width = '"+thisChart.fields[j][i]*3+"'>&nbsp;&nbsp;";
   /*chartBody = <h2>+thisChart.name+</h2>
                 <table>
      <tr class='horiz'>
        <th rowspan = '4'>thisChart.years[i]</th>      1999
                       <td><td colspan='2'></td>
      </tr>  
                  <tr class='horiz'>
       <td>
        thisChart.fieldnames[j]  Netscape/Mozilla
       </td>
       <td>                                    0   1
        <img src=imgSrc width=thisChart.fields[j][i]*3> 38*3
 */
 chartBody += thisChart.fields[j][i]+"</td></tr>";
   /*chartBody = <h2>+thisChart.name+</h2>
                 <table>
      <tr class='horiz'>
        <th rowspan = '4'>thisChart.years[i]</th>  1999  
                       <td><td colspan='2'></td>
      </tr>  
                  <tr class='horiz'>
       <td>
        thisChart.fieldnames[j] Netscape/Mozilla
       </td>
       <td>
        <img src=imgSrc width=thisChart.fields[j][i]*3>
                    thisChart.fields[j][i]  38*3
       </td> 
                 </tr>
  */
 }
   }else{ //没有选中选中horizontal
     chartBody += "<tr class='vert'><th rowspan='2'>"+thisChart.years[i]+"</th>";
   /*
    <h2>+thisChart.name+</h2>  当thisChart.name是对象bChart时 当i为1时候
     <table>
   <tr class='vert'>
    <th>
     thisChart.years[i]  1999
    </th>
      */
  for(var j=0; j<thisChart.fieldnames.length; j++){//遍历对象属性名为fieldnames的属性值
    chartBody += "<td><img src='"+imgSrc;
    /*
     <h2>+thisChart.name+</h2>    当j为0的时候
     <table>
   <tr class='vert'>
    <th>
     thisChart.years[i] 1999
    </th>
    <td>
     <img src=imgSrc
    */
   chartBody += "'height='"+thisChart.fields[j][i]*3+"'></td>";
     /*
     <h2>+thisChart.name+</h2>
     <table>
   <tr class='vert'>
    <th>
     thisChart.years[i] 1999
    </th>
    <td>
     <img src=imgSrc height=thisChart.fields[j][i]*3>   38*3
    </td>
     */
  }
  chartBody += "</tr><tr class='vert'>";
     /*
     <h2>+thisChart.name+</h2>
     <table>
   <tr calss='vert'>
    <th>
     thisChart.years[i]  1999
    </th>
    <td>
     <img src=imgSrc height=thisChart.fields[j][i]*3>  38*3
    </td>
       </tr>
    <tr class=vert>
  */
     for(j=0;j<thisChart.fieldnames.length;j++){
   chartBody += "<td>"+thisChart.fields[j][i]+"<br>";
    /*
     <h2>+thisChart.name+</h2>
     <table>
   <tr calss='vert'>
    <th>
     thisChart.years[i]   1999
    </th>
    <td>
     <img src=imgSrc height=thisChart.fields[j][i]*3>  38*3
    </td>
       </tr>
    <tr class=vert>
     <td>
      thisChart.fields[j][i]  38
   <br>
  */
   chartBody += thisChart.fieldnames[j]+"<br><br></td>";
    /*
     <h2>+thisChart.name+</h2>
     <table>
   <tr calss='vert'>
    <th>
     thisChart.years[i]  1999
    </th>
    <td>
     <img src=imgSrc height=thisChart.fields[j][i]*3> 38*3
    </td>
       </tr>
    <tr class=vert>
     <td>
      thisChart.fields[j][i]  38
   <br>
   thisChart.fieldnames[j]  "Netscape/Mozilla"
   <br>
   <br>
    </td> 
    */ 
  }
  chartBody += "</tr>";
   /*
    <h2>+thisChart.name+</h2>
     <table>
   <tr calss='vert'>
    <th>
     thisChart.years[i]  1999
    </th>
    <td>
     <img src=imgSrc height=thisChart.fields[j][i]*3> 38*3
    </td>
       </tr>
    <tr class=vert>
     <td>
      thisChart.fields[j][i] 38
   <br>
   thisChart.fieldnames[j] "Netscape/Mozilla"
   <br>
   <br>
    </td>
   </tr>
   */  
   }
  }
  chartBody += "</table>";
  document.getElementById("checkArea").innerHTML = chartBody;
  function getButton(buttonSet){
   for(var i=0; i<radioButtons.length; i++){ //遍历所有input元素
    if(radioButtons[i].name == buttonSet && radioButtons[i].checked){ //如果节点名称为direction并且input元素被选中
  return radioButtons[i].value; //返回元素值
 }
   }
   return -1;
  }
 }
</script>
</head>

<body>
 <div id="chartType">
  Choose a chart<br />
  <input type="radio" name="type" value="browser" checked="checked"/>Browser  Usage<br />
  <input type="radio" name="type" value="platform" />JavaScript Usage<br />
  Choose a color<br />
  <input type="radio" name="color" value="lilRed.gif" checked="checked"/> &nbsp;Red<br />
  <input type="radio" name="color" value="lilGreen.gif" />Green<br />
  <input type="radio" name="color" value="lilVBlue.gif" />Blue<br />
  Choose a direction<br />
  <input type="radio" name="direction" value="horizontal" checked="checked" />horizontal<br />
  <input type="radio" name="direction" value="vertical" />Vertical
 </div>
 <div id="checkArea">&nbsp;</div>
</body>
</html>

代码-君
关注
专栏目录
柱状图生成测试
lvlv526的专栏
05-11 1165
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Drawing.Imaging;using System.Web;using System.Web.SessionState;using System.Web.UI
D3指arc生成器__圆形上分布柱状图
跟自己比，不要跟别人比
03-31 2091
var width=800,height=600; // var data = [ // {startAngle:0,endAngle:2*Math.PI/3}, // {startAngle:2*Math.PI/3,endAngle:4*Math.PI/3}, // {startAngle:4*Ma...
钻孔柱状图生成软件
03-29
用于自动生成钻孔柱状图的软件，便于勘查工作者很好的整理钻孔数据。
Python可视化数据分析-柱状图/折线图
最新发布
weixin_44686138的博客
04-20 2500
python数据可视化分析，生成柱状图、折线图
JavaScript基础教程第8版
06-12
12.6　柱状图生成器　240 12.7　样式表切换器　246 第13章　Ajax简介　253 13.1　Ajax的定义　253 13.2　读取服务器数据　255 13.3　解析服务器数据　261 13.4　刷新服务器数据　266 13.5　从服务器获得数据　267 ...
java报表jfreechart开发
10-20
复合图允许在一个图表上同时显示两种不同类型的图表，例如折线图和柱状图的组合。 ##### 2.14 开发远景 随着技术的发展，JFreeChart也在不断进步。未来版本将会引入更多高级功能和改进现有特性，以满足日益增长的...
神经网络中可解释的部分-整体层次结构和概念-语义关系
136890神经网络中可解释的部分-整体层次结构和概念-语义关系0Nicola ... DISI Via Sommarive,9, 38123 Povo, Trento TN0nicola.garau,niccolo.bisagno,zeno.sambugaro,nicola.conci@unitn.it0图1.[彩色更佳]
python程序设计基础董付国 pdf-Python程序设计基础与应用
weixin_37988176的博客
10-29 3148
图书简介配套资源：部分全彩印刷、电子课件、教学大纲、习题答案、源代码本书特色：★知名Python教育者董付国老师新作。★言简意赅，案例丰富，配套资源超全部分内容全彩呈现。★本书全部代码适用于Python 3.5、Python 3.6以及更高版本。申请样书，配套资源均可在本页面申请下载，也可联系微信15910938545直接索取《Python程序设计基础与应用》是一本系统介绍Python程序开发与应...
酷炫漂亮的PB 11.5 FLASH图表源码（FusionChartsFree）
05-03
自己整理的酷炫漂亮的PB 11.5 FLASH图表源码（FusionChartsFree）
JfreeChart生成饼图、环形图、柱状图、折线图最强工具，自己使用
weixin_45691427的博客
11-25 1860
以下是生成图片、表格数据、然后导出word文档的代码。
一款简单、实时、酷炫的图表制作软件
热门推荐
licunlan0904的专栏
09-08 2万+
当今，图表制作已经成了每一个职场人的日常，如果列个职场基本傍身技能排行榜，图表制作怕是前三了。虽说它是工作日常，虽说它很重要，但很多人还是做不好图表。   比如，我们想象中的图表可能是这样的：   做出来的图表却是这样的：   结果就是，本来想给老板展示成绩汇报工作来着，回应我们的却是一脸的嫌弃。   究其原因，不外乎两点。 第
JS Charts生成网页的柱状图，圆饼图以及曲线图
刘津宇教编程
06-26 5474
JS Charts 是一个轻量级的免费javascript 基础图表生成器，支持柱状图，圆饼图以及简单的曲线图。不需要在服务器端安装插件，只需在客户端加入javascript代码。JS Charts 支持XML 和 JSON 数据。图片格式为PNG，兼容所有主要浏览器。 曲线图 柱状图
数据生成柱状图
zhouxuan623的专栏
06-08 2471
需求:将汇总的数据生成柱状图#coding:utf-8 import xlrd import xlwt def all_list(arr): """获取所有元素的出现次数，使用list中的count方法""" result = {} for i in set(arr): result[i] = arr.count(i) return result...
转载--D3.js
zym1117的博客
03-21 889
前言        近期略有点诸事不顺，趁略有闲余之时，玩起D3.js。之前实际项目中主要是用各种chart如hightchart、echarts等，这些图形库玩起来貌都是完美的，一切皆可配置，但几年前接触了D3之后，觉得前面那chart类库局限的地方在于，基本不可定制；而D3呢，你说了算，你想画出什么样的图，你说了算，自由度很大，当时就有点膜拜和仰慕，小打小闹的玩了几下，没有沉下心来专心去玩，当...
分享2个在线图表制作工具
像Storm一样飞
04-27 1万+
1、使用Excel可以轻松完成图表的制作 但是有个缺点，不能云端存储，我需要一个在线编辑的图表，无论身处何地，无论哪台电脑，只要能联网，即可编辑； 2、推荐一 http://charts.udpwork.com/ 3、推荐二 http://www.tubiaoxiu.com/ ...
html5柱状图模板,html5生成柱状图（条形图）
weixin_35784728的博客
06-16 2800
(function (){window.addEventListener("load", function(){var data = [1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];var xinforma = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月...
Echarts根据需要生成对应的图表
红岸基地
05-23 1296
效果预览：这里就不赘述了，之前的文章已经写了怎么使用的，直接发代码就行了，其实就是将函数加一个参数判断一下需要生成什么类型的图表，没有技术含量。H5源码： &lt;h2&gt;请输入对应信息&lt;/h2&gt; &lt;input type="text" name="" id="head" placeholder="表头" /&gt;&lt;br /&gt
powerbuilder 12.6 winxp toolbar 图片不显示
08-16
如果在PowerBuilder 12.6 WinXP中工具栏的图片不显示，可能是以下几个原因导致的： 1. 图片路径错误：检查工具栏按钮的属性设置，确保路径是正确的。尽量使用绝对路径，以避免相对路径的问题。 2. 图片文件丢失或损坏：检查工具栏所使用的图片文件，确保它们存在且完好无损。如果图片文件丢失或损坏，需要重新添加或替换这些文件。 3. 透明度设置错误：某些图片可能包含透明度信息，在低版本的Windows XP系统中可能无法正确显示。尝试重新生成或替换这些图片，确保图片不包含透明度信息。 4. 控件属性设置错误：检查工具栏按钮的控件属性设置，确保属性值正确。例如，检查Visible属性是否设置为True，确保按钮是可见的。 5. 系统兼容性问题：PowerBuilder 12.6 WinXP可能不完全与Windows XP系统兼容。尝试在其他支持PowerBuilder 12.6的操作系统上运行应用程序，检查是否能够正常显示工具栏的图片。 如果以上解决方法都无效，可能需要考虑升级PowerBuilder版本或咨询PowerBuilder技术支持人员以获取进一步的帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值