jschart画图(一)曲线图

sillycat

浏览: 2561012 次
性别:
来自: 成都

最近访客更多访客>>

huageng520

learnmore

u012363178

ymgjava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript IE HTML

jschart画图(一)曲线图

首页
http://www.jscharts.com/

文档介绍
入门http://www.jscharts.com/how-to-use
深入http://www.jscharts.com/how-to-use-reference

下载地址
http://www.jscharts.com/free-download

得到文件JS-Charts_demo.zip

参考DEMO中的示例，实现了勾画曲线功能。
拷贝目录
E:\book\jschart\JS-Charts_demo\examples\line-charts\example-2
下的两个示例文件
拷贝目录
E:\book\jschart\JS-Charts_demo\sources
下的jschart核心文件

将这三个文件放置到一起，修改index.html如下：
<html>
<head>
<title>JSChart</title>
<script type="text/javascript" src="jscharts.js"></script>
</head>
<body>
<div id="graph">Loading graph...</div>
<script type="text/javascript">
var x_length = 120;
var x_step = 20;

var myData = new Array(x_length);
//var myData = new Array([1997, 7.80], [1998, 4.80],
for(var i = 0;i<x_length;i++){
   myData[i] = new Array(i,i);
}

var myChart = new JSChart('graph', 'line');
myChart.setDataArray(myData);
myChart.setTitle('图形测试');
myChart.setTitleColor('#8E8E8E');
myChart.setTitleFontSize(11);
myChart.setAxisNameX('');
myChart.setAxisNameY('');
myChart.setAxisColor('#8420CA');
myChart.setAxisValuesColor('#949494');
myChart.setAxisPaddingLeft(100);
myChart.setAxisPaddingRight(120);
myChart.setAxisPaddingTop(50);
myChart.setAxisPaddingBottom(40);
myChart.setAxisValuesDecimals(3);
myChart.setShowXValues(false);
myChart.setGridColor('#C5A2DE');
myChart.setLineColor('#BBBBBB');
myChart.setLineWidth(1);
myChart.setFlagColor('#9D12FD');
myChart.setFlagRadius(1);

for(var m = 0;m < x_length;m++){
   // myChart.setTooltip([1997, 'GDP 7.80']);
   myChart.setTooltip(new Array(m,'VALUE' + m));
}

for(var n = 0;n < x_length;n++){
   //myChart.setLabelX([1997, '1997']);
   if(( (n + 1) % x_step)== 0){
    myChart.setLabelX([n, "" + (n + 1)]);
   }
}
myChart.setSize(616, 321);
myChart.setBackgroundImage('chart_bg.jpg');
myChart.draw();
</script>

</body>
</html>

将x_length设置了1440个点时，发现FF打开图像的速度很快，但是IE几乎打不开，系统资源消耗严重。
所以还是采用javascript vml的程序。不采用jschart。

JAVA的性能可以用jprobe调试，javascript的性能和执行时间咋调试呢。。。继续寻找中

分享到：

jsunit测试javascript | Javascript勾画曲线图(二)

2010-01-06 14:31
浏览 3627
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论