-
等级
本版专家分：0结帖率 92% -
我做的是这样的功能,就是先是一个柱形图展示出来,比如柱形图是灰的.然后用数据来填充这个柱形图,柱形图上有个标记.当填充的长度超过这个标记时,数据变色.这种用js怎么实现?最好能有例子,js不太熟.展开阅读全文
-
等级
本版专家分：17
-
你好，你想需要了解vml 浏览器支持的画图功能.我以前用javascrpt+vml 实现过饼图
http://www.blogjava.net/luchunwei/archive/2009/03/12/64364.html 你看看就是你要的了
-
版主等级
本版专家分：395875勋章
-
- 探花 2017年 总版技术专家分年内排行榜第三
-
-
进士
2018年总版新获得的技术专家分排名前十
2013年 总版技术专家分年内排行榜第五
-
-
金牌
2018年5月 总版技术专家分月排行榜第一
2018年4月 总版技术专家分月排行榜第一
2018年2月 总版技术专家分月排行榜第一
2017年8月 总版技术专家分月排行榜第一
-
-
银牌
2018年3月 总版技术专家分月排行榜第二
2017年11月 总版技术专家分月排行榜第二
2016年2月 总版技术专家分月排行榜第二
2014年2月 总版技术专家分月排行榜第二
2013年4月 总版技术专家分月排行榜第二
-
-
如果是2d不需要vml，不过如果是3d的柱状图像就需要vml或者图形背景来实现了
-
等级
本版专家分：4175 -
动态修改DIV的长宽即可.
-
等级
本版专家分：0
-
我的做成2d的就行,应该用不到vml.有没有具体的例子,对js实在不熟.
-
等级
本版专家分：15823勋章
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
你是或的这个功能有点难度，可以动态修改DIV或者使用vml，SVG之类的
-
等级
本版专家分：0
-
在网上查了一下用jquery+ajax实现应该不错,但具体的不熟.哎!
-
等级
本版专家分：3063勋章
-
- 红花 2004年10月 Java大版内专家分月排行榜第一
-
-
Yui
Extjs
Rgraph
都有柱状图，不需要自己实现。
-
等级
本版专家分：0
-
<html>
<head>
<title>JavaScript绘图</title>
<script language="JavaScript">
IE4 = ! (navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape")
var xo=0
var yo=0
var Ox = -1
var Oy = -1
var rad = Math.PI/180
var maxY = 400
var color = "red"
function print(str) {
document.write(str)
}
function orgY(y) {
return maxY-y
}
function outPlot(x,y,w,h) {
print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
}
function Plot(x,y) {
outPlot(x,y,1,1)
if(Ox>=0 || Oy>=0) {
ShowLine(Ox,Oy,x-Ox,y-Oy)
}
Ox = x
Oy = y
}
function ShowLine(x,y,w,h) {
if(w<0) {
x += w
w = Math.abs(w)
}
if(h<0) {
y += h
h = Math.abs(h)
}
if(w<1) w=1
if(h<1) h=1
outPlot(x,y,Math.round(w),Math.round(h))
}
function LineTo(x,y) {
Line(xo,yo,x,y)
}
function sign(n) {
if(n>0)
return 1
if(n<0)
return -1
return n
}
function Line(x1,y1,x2,y2) {
x2 = Math.round(x2)
y2 = Math.round(y2)
xo = x2
yo = y2
y1 = orgY(y1)
y2 = orgY(y2)
var str = ""
var i=0
var x = x1
var y = y1
dx = Math.abs(x2-x1)
dy = Math.abs(y2-y1)
s1 = sign(x2-x1)
s2 = sign(y2-y1)
if(dx==0 || dy==0) {
ShowLine(x1,y1,x2-x1,y2-y1)
return
}
if(dx>dy) {
temp = dx
dx = dy
dy = temp
key = 1
}else
key = 0
e = 2*dy-dx
for(i=0;i<dx;i++) {
px = 0
py = 0
Plot(x,y)
while(e>=0) {
if(key==1) {
x += s1
px += s1
}else {
y += s2
py += s2
}
e = e-2*dx
}
if(key==1)
y += s2
else
x += s1
e = e+2*dy
}
}
function MoveTo(x,y) {
Ox = Oy = -1
xo = Math.round(x)
yo = Math.round(y)
}
// 圆
function Cir(x,y,r) {
MoveTo(x+r,y)
for(i=0;i<=360;i+=5) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
}
// 弧形
function Arc(x,y,r,a1,a2) {
MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y)
for(i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
}
// 扇形
function Pei(x,y,r,a1,a2) {
MoveTo(x,y)
for(var i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
}
// 弹出扇形
function PopPei(x,y,r,a1,a2) {
dx = r*Math.cos((a1+(a2-a1)/2)*rad)/10
dy = r*Math.sin((a1+(a2-a1)/2)*rad)/10
x += dx
y += dy
MoveTo(x,y)
for(var i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
}
// 矩形
function Rect(x,y,w,h) {
MoveTo(x,y)
LineTo(x+w,y)
LineTo(x+w,y+h)
LineTo(x,y+h)
LineTo(x,y)
}
// 准星
function zhunxing(x,y) {
var ox = xo
var oy = yo
var oColor = color
color = "#000000"
Line(x-5,y,x+6,y)
Line(x,y-6,x,y+5)
print('<span style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')
color = oColor
xo = ox
yo = oy
}
// 标注
function biaozhuStr(x,y,s) {
return '<span style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'
}
function biaozhu(x,y,s,t) {
var ox = xo
var oy = yo
var oColor = color
point = "p01.gif"
if(t==1) {
print(biaozhuStr(x-5,y+6,"·"+s))
}
if(t==2) {
print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s))
}
color = oColor
xo = ox
yo = oy
}
</script>
</head>
<body>
<table border="0" width="100%">
<tr>
<td width="100%" style="font-family: 方正舒体; font-size: 18pt; color: #FF0000" class="t1">JavaScript绘图</td>
</tr>
<tr>
<td width="100%" style="font-family: 幼圆; font-size: 12pt; color: #008000" class="t2">
如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！</td>
</tr>
</table>
<script>
if(IE4) {
// 基本图形
color = "maroon"
Cir(50,40,20)
Arc(100,40,20,60,120)
Pei(150,60,40,240,300)
Rect(200,20,40,40)
Line(0,0,20,20)
// 折线图
color = "#FF0000"
var jd = new Array(
203,232,277,223,271,234,273,284,276,250,267,280
)
MoveTo(30,jd[0]-40)
biaozhu(xo,yo,jd[0])
for(i=1;i<jd.length;i++) {
LineTo(i*30+30,jd[i]-40)
biaozhu(xo,yo,jd[i],1)
}
color = "#C0C0C0"
Line(30,140,i*30+30,140)
Line(30,140,30,260)
// 饼图
color = "#00FF00"
var gc = new Array(
150,120,200,180,180
)
var s = 0
var m = 0
var n = 0
for(i=0;i<gc.length;i++) {
s +=gc[i]
if(gc[i] > m) {
m = gc[i]
n = i
}
}
var k = s/360
var mm = 0
var a =0
for(i=0;i<gc.length;i++) {
b = Math.round((gc[i]+mm)/k)
if(i==n)
PopPei(600,150,100,a,b)
else
Pei(600,150,100,a,b)
biaozhu(60,a+(b-a)/2,Math.round(gc[i]/s*100)+"%",2)
mm = mm+gc[i]
a = b
}
// 十字标注
MoveTo(280,20)
zhunxing(xo,yo)
}else {
document.write("<p> </p><table bgcolor=#FF0000><tr><td><font color=#FFFF00>对不起！您的浏览器不能支持该页的某些功能，请换用IE4.0以上版本的浏览器！谢谢！</font></td></tr></table>")
}
</script>
</body>
</html>
- 利用svg及JavaScript做柱状图
使用SVG最头痛的一点就是其宽度和高度是从左上到右下的方向增加的，这意味如果我们需要一个水平排列的柱状图即柱状图底部处于同一y轴操作起来会很麻烦。网上也有不少方法但是多数也是看的一头雾水，然而突然灵光一闪...
- 原生js和canvas实现的 柱状图、饼状图、折线图
原生js和canvas实现的 柱状图、饼状图、折线图
- 关于如何使用原生HTML + JS + CSS绘制简单折线柱状图
在看了不借助Echarts等图形框架原生JS快速实现折线图效果并自己重新实现了以后，实在是感慨CSS的强大之处，并作出记录。 正文 先上结果图： 总结下自己觉得关于几点比较难以理解的点： 1. 如何实现以下效果： 以上...
- 用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（上）
这个又要说到什么是raphael.js。raphael是一个javascript库，可以用来跨浏览器绘制各种图形，只要是你想得到的图形都可以用raphael绘制出来，而且raphael还可以实现各种常用和常见的动画效果，比如放大、移动、旋转...
- js画出柱状图
柱状图可以分为三类：分别是单柱，双柱（可与旧数据做对比），覆盖双柱（可与旧数据做对比，也可以用来表示任务完成情况） 这里用single、parallel、cover表示 其中box就是我们绘制的区域 以下是代码代表不同的...
- js界面画柱状图
2019独角兽企业重金招聘Python工程师标准>>> ...
- 原生js如何实现柱状图以及原生js柱状图结合ajax循环动态数据_JavaScript_柱状图（原生JavaScript做的柱状图...
原生JavaScript做的柱状图，数据是通过ajax从后端php代码中获取。 如果有的柱子颜色是白色，就多点几次按钮。 效果图： 代码： 前端html，css，js代码 /*整个显示柱状图的区域的高度...
- 用d3.js画一个柱状图
1. 前言 涉及到的比较重要的点 Scale（比例尺） Update、Enter、Exit 2. 比例尺 重点在于比例尺的应用 线性比例尺 domain是定义域，range是值域 可以将定义域放大或者缩写 ... 假设我们的数据长度是[0, 1000]，但是...
- D3.js实现带动画效果的柱状图
&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;zh-cn&amp;amp;amp;quot;&amp;...g
- 从零开始的JavaScript入门-使用JS绘制柱状图与折线图
上一篇博客讲解了如何使用JS绘制美观的热图，本篇准备讲解一下最基本的统计图：柱状图与折线图。 这两个图其实本质上是一样的。老样子，先上效果： 再上代码： <!DOCTYPE html> <...
- 使用echarts画柱状图
最近在项目中需要图表分析，查了些资料发现使用echarts来画图的比较多，小编自己也试了试，写了些demo发出来加深下自己的记忆。demo很基础，做了些简单的封装，仅供参考。 html页面 <!...met...
- echarts如何画柱状图，以及参数解释
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&...width=device-width, user-scalable=no, initial
- Chart.js 堆叠柱状图添加flag
本文章是因为项目中之前遇到一个问题，需要在堆叠柱状图加上一个月份的flag，但是flag不能覆盖到柱状图。所以当时自己写了demo去查看相关的内容。初始想法是参照官方文档扩展chart<!DOCTYPE html> &...
- plot()函数画柱状图
aspx页面画图： <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>质量优化结果<...uc1:HeaderCSS runat="server" ID="He...
- 高德地图 绘制 柱状图形
要注意清空柱状图形 <template> <div class="contentBox"> <div id="map"></div> </div> </template> <script> import AMap from 'AMap' export default { data()...
- HTML 画柱状图
var totalData=[{name:"考研",num:35},{name:"工作",num:86}]; var schollData=[{name:"西南科技大学",num:15},{name:"电子科技大学",num:8},{name:"四川大学",num:4},{name:"西安电子科技大学",num:8}];...
- d3.js——层叠柱状图（v5）
一、页面引入 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scal...
- Chart.js-柱状图分析（参数分析+例图）
Chart.js-柱状图分析（参数分析+例图）柱状图样式总览基本写法参数解析条形图1 - 普通条形图条形图2 - 水平条形图条形图3 - 同比（放在一起比较）条形图条形图4 - 叠加条形图 柱状图样式总览 基本写法 首先在< ...
- Qt使用ECharts画柱状图并与JS通信
本文是基于一个实例Demo:Qt使用ECharts画柱状图并与JS通信，并将源码已经上传至码云(gitee) 源码地址： https://gitee.com/ALONE_WORK/QtCeShiXiangMu/tree/master/EChartDemo 感谢网上好多前辈的...
- jsp怎么做柱状图_jQuery制作简单柱状图实例
本文实例讲述了jQuery制作简单柱状图的方法。分享给大家供大家参考。具体实现方法如下：Html部分：柱状图CSS部分：/*以下为柱状图样式*/.histogram-container{position:relative;margin-left:60px;margin-top:10px;...
- js中charts中怎么设置在柱状图上方显示对应的数值？
chart中我想在柱状图的上方显示对应的数值 我在label中设置了显示，但是图形上方还是没有数据， ``` itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 ...
- 原生js，canvas实现柱状图，折线图，饼图
效果图： <!DOCTYPE> <html> <head> <title>the title</title> </head> <body> <...
- 使用echarts画横向柱状图
在html页面中使用echarts的话，需要使用script先引入 echarts.min.js 或者 echarts.js文件； <script src="echarts.min.js"></script> html页面中的示例代码如下： <!DOCTYPE html> <...
- jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图。 echarts画出的图是不能直接打印出来的（echarts的柱状图是用canvas画出来的），而jquery.wordexport.js只能打印出图片，所以我先把echarts柱状图换成图片再去...
- echarts 堆叠柱状图3d效果_纯CSS3实现柱状图的3D立体动画效果
首先，我们看一看要实现的效果：今天这篇文章所实现的动画效果起源于一个小小的想法，这个想法来自于另一个网站的一篇文章，它介绍了如何在网页中使用CSS、图片和JavaScript创建立体的柱状图。在阅读了那篇文章之后...
- 需要用chart.js 写一个横向柱状图（条形图）
不知道chart.js可不可以做横向的条形图，简单看一下文档好像没有提到关于横向柱状图的代码
- 29Echarts - 柱状图（柱状图动画延迟）
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min....
- 利用js生成3D柱状图
1.引用js文件 <script src="${pageContext.request.contextPath }/js/highcharts.js"></script> <script src="${pageContext.request.contextPath }/js/...
- echarts压缩js（包含柱状图闪烁效果）
本资源为本人二次打包的echarts压缩js，包含柱状图闪烁效果，也可学习我的教程后，自行打包，谢谢大家！
- Three.js 三维坐标柱状图
Three.js制作的三维坐标轴柱状图，含坐标矢量。注意建议用webstorm打开，不要直接打开，否则坐标轴的值显示不出来，因为字体加载要在http或者https协议下才能被加载解析。