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>
[解决办法]
扫了一眼，貌似除了canvas还支持SVG？
[解决办法]
接分咯。。。。。。
