87,997
社区成员
发帖
与我相关
我的任务
分享javascript图表组件（Walter Zorn）
纯js的蛮好用的，推荐给大家，不知道以前发过没有，Walter Zorn的拖放，自定义提示等等都很不错的咚咚
例子、文档及下载：http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
这是我用来测试的demo
----------------------------
<style>
.canvas {
position:relative;
height:350px;
width:648px;
margin:12px;
border-top:1px solid #EFEFEF;
border-left:1px solid #EFEFEF;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}
</style>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<body onload=myDrawFunction()>
<div id="myCanvas" class="canvas"></div>
<button onclick="drawBarChart()">Draw Bar Chart</button><button onclick="drawLineChart()">Draw Line Chart</button><button onclick="drawPieChart()">Draw Pie Chart</button>
<script type="text/javascript">
<!--
var pad = 24
var tt = 30
var bt = 30
var ch = 350 - bt
var jg = new jsGraphics("myCanvas");
function myDrawFunction()
{
//drawLineChart()
//drawPieChart()
drawBarChart()
}
function drawBarChart()
{
jg.clear();
jg.setColor("#808080");
// draw Axes
jg.drawLine(pad, ch, pad+600, ch); //x
jg.drawLine(pad, tt, pad, ch); //y
jg.setColor("blue");
// draw line
var x, y
for(var i=0; i<10; i++)
{
x = pad + 15 + i*50
y = bt + Math.floor(200 * Math.random())
h = 350 - y - tt
jg.fillRect(x, y, 15, h)
}
jg.paint();
}
function drawLineChart()
{
jg.clear();
jg.setColor("#808080");
// draw Axes
jg.drawLine(pad, ch, pad+600, ch); //x
jg.drawLine(pad, tt, pad, ch); //y
jg.setColor("blue");
// draw line
var x1, y1, x2, y2
for(var i=0; i<10; i++)
{
if (x2)
{
x1 = x2
y1 = y2
}
else
{
x1 = pad + 15 + i*50
y1 = bt + Math.floor(200 * Math.random())
}
var x2 = pad + 15 + (i+1) * 50
var y2 = bt + Math.floor(200 * Math.random())
jg.drawLine(x1, y1, x2, y2)
}
jg.paint();
}
function drawPieChart()
{
jg.clear();
// shadow
jg.setColor("#CCCCCC");
jg.fillArc(50, 57, 100, 60, 0, 360);
// pie
jg.setColor("blue");
var x1 = Math.floor(100 * Math.random())
jg.fillArc(50, 50, 100, 60, 0, x1);
jg.setColor("red");
var x2 = x1 + Math.floor(100 * Math.random())
jg.fillArc(50, 50, 100, 60, x1, x2);
jg.setColor("orange");
var x3 = x2 + Math.floor(160 * Math.random())
jg.fillArc(50, 50, 100, 60, x2, x3);
jg.setColor("#efefef");
jg.fillArc(50, 50, 100, 60, x3, 360);
// text
jg.setColor("black");
jg.drawString("Text", 50, 180);
jg.paint();
}
//-->
</script>
例子、文档及下载：http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
这是我用来测试的demo
----------------------------
<style>
.canvas {
position:relative;
height:350px;
width:648px;
margin:12px;
border-top:1px solid #EFEFEF;
border-left:1px solid #EFEFEF;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}
</style>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<body onload=myDrawFunction()>
<div id="myCanvas" class="canvas"></div>
<button onclick="drawBarChart()">Draw Bar Chart</button><button onclick="drawLineChart()">Draw Line Chart</button><button onclick="drawPieChart()">Draw Pie Chart</button>
<script type="text/javascript">
<!--
var pad = 24
var tt = 30
var bt = 30
var ch = 350 - bt
var jg = new jsGraphics("myCanvas");
function myDrawFunction()
{
//drawLineChart()
//drawPieChart()
drawBarChart()
}
function drawBarChart()
{
jg.clear();
jg.setColor("#808080");
// draw Axes
jg.drawLine(pad, ch, pad+600, ch); //x
jg.drawLine(pad, tt, pad, ch); //y
jg.setColor("blue");
// draw line
var x, y
for(var i=0; i<10; i++)
{
x = pad + 15 + i*50
y = bt + Math.floor(200 * Math.random())
h = 350 - y - tt
jg.fillRect(x, y, 15, h)
}
jg.paint();
}
function drawLineChart()
{
jg.clear();
jg.setColor("#808080");
// draw Axes
jg.drawLine(pad, ch, pad+600, ch); //x
jg.drawLine(pad, tt, pad, ch); //y
jg.setColor("blue");
// draw line
var x1, y1, x2, y2
for(var i=0; i<10; i++)
{
if (x2)
{
x1 = x2
y1 = y2
}
else
{
x1 = pad + 15 + i*50
y1 = bt + Math.floor(200 * Math.random())
}
var x2 = pad + 15 + (i+1) * 50
var y2 = bt + Math.floor(200 * Math.random())
jg.drawLine(x1, y1, x2, y2)
}
jg.paint();
}
function drawPieChart()
{
jg.clear();
// shadow
jg.setColor("#CCCCCC");
jg.fillArc(50, 57, 100, 60, 0, 360);
// pie
jg.setColor("blue");
var x1 = Math.floor(100 * Math.random())
jg.fillArc(50, 50, 100, 60, 0, x1);
jg.setColor("red");
var x2 = x1 + Math.floor(100 * Math.random())
jg.fillArc(50, 50, 100, 60, x1, x2);
jg.setColor("orange");
var x3 = x2 + Math.floor(160 * Math.random())
jg.fillArc(50, 50, 100, 60, x2, x3);
jg.setColor("#efefef");
jg.fillArc(50, 50, 100, 60, x3, 360);
// text
jg.setColor("black");
jg.drawString("Text", 50, 180);
jg.paint();
}
//-->
</script>
...全文
请发表友善的回复…
发表回复
glvicky 2007-07-31
- 打赏
- 举报
接分咯。。。。。。
xjdawu 2007-07-31
- 打赏
- 举报
不是支持SVG，是比SVG, VML等技术的平台适应性好
ssssssssssss 2007-07-31
- 打赏
- 举报
扫了一眼，貌似除了canvas还支持SVG？
xjdawu 2007-07-31
- 打赏
- 举报
标题有误，不是图表组件，是画图组件的简单图表应用
xjdawu 2007-07-31
- 打赏
- 举报
加分咯。。。。。。
