javascript图表组件（Walter Zorn）,该如何处理
日期：2014-05-16 浏览次数：20347 次
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())
}
纯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())
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
