javascript图表组件（Walter Zorn）

[xjdawu]

纯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>

[xjdawu]

加分咯。。。。。。

[xjdawu]

标题有误，不是图表组件，是画图组件的简单图表应用

[ssssssssssss]

扫了一眼，貌似除了canvas还支持SVG？

[xjdawu]

不是支持SVG，是比SVG, VML等技术的平台适应性好

[glvicky]

接分咯。。。。。。