jschart画图(一)曲线图

最新推荐文章于 2024-01-09 15:01:39 发布
最新推荐文章于 2024-01-09 15:01:39 发布
阅读量225 收藏
点赞数
分类专栏： UI 文章标签： JavaScript IE HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/magic_dreamer/article/details/83525838
版权
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的性能和执行时间咋调试呢。。。继续寻找中
magic_dreamer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js绘制html5数值曲线,Chart.js 教程绘制曲线图（Line chart）
weixin_39524147的博客
06-28 2743
Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。它非常简单帮你展现各种数据的图表展现形式，我们今天看看如何引入和基本的操作，并用它绘制一个制曲线图(Line chart)。Chart.js特性1、6种图表类型Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。◆ 曲线图(Line charts)...
JS绘制曲线图源码
11-01
JS绘制曲线图，Javascript 编写的绘制曲线图的源码
JS绘制曲线图
weixin_30808693的博客
09-20 887
一哥们问我如何用JS绘制曲线图,被我嗤之以鼻, 随后搜索了一下, 竟然发现JS居然真的可以弄,虽然效果想对简单,但是这可是实打实的JS only啊…由此可见, 学习一途,任重道远… 文章来自:http://bbs.blueidea.com/thread-2894005-1-1.html 这是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1...
js 实现曲线图
LFei2010的博客
07-01 1185
小弟是搞变压器系统的，用到了曲线图，所以上传上来，大哥们可以看看，有更好的实现方法，请给小弟指导！！！谢谢！！
js画曲线功能
06-05
纯js画曲线功能，当有数据时，替换数据即可
易语言随机曲线图形
08-21
易语言随机曲线图形源码系统结构:画图,HSVToRGB,画点, ======窗口程序集1 || ||------画图 || ||------HSVToRGB || ||------画点 || ||------__启动窗口_创建完毕 || ||------_时钟1_周期事件
c#画图工具,常见图形
06-13
在C#编程环境中，开发画图工具是一项常见的任务，它涉及到Windows Forms或WPF应用程序的图形用户界面（GUI）设计。这些工具允许用户创建、编辑和操作各种图形，包括简单的几何形状、线条、曲线等。在C#中，我们可以...
C#实时曲线绘图（含控件）
07-19
代码含控件，示例调用控件，实时显示动态曲线。
基于MATLAB GUI实现动态画图曲线的源程序
最新发布
06-17
【作品名称】：基于MATLAB GUI实现动态画图曲线的源程序 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：基于MATLAB ...
EXCEL表画曲线图方法.doc
12-01
EXCEL表画曲线图方法是使用Excel软件绘制曲线图的一种方法，利用Excel强大的计算功能和数据填充柄工具，可以快速方便地绘制曲线图。该方法的最大优点是不失真，步骤如下： 首先，打开Excel软件，输入自变量的两个...
css+js绘制曲线轨迹（修正版）
04-10
css+js绘制曲线轨迹
JavaScript canvas绘制折线图
12-28
本文实例为大家分享了canvas绘制折线图的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width=600 height=400></canvas> [removed] /*1.构造函数*/ var LineChart = function (ctx) { /*
chart.js 最新版 (曲线图) 创建例子
HuYong
11-17 7654
说明：由于chart.js 的版本更新，按照第一版的关键字设置图表的颜色等关键字，已经不会生效，所以记录一下第二版chart曲线图表的创建。     &lt;div&gt; &lt;canvas id="canvas" width="400" height="450"&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;script sr
【数据可视化】【1】手把手教你使用d3.js绘制折线图
C++程序猿
01-09 2178
借助于强大的d3.js实现折线图的绘制，涵盖了数据可视化的基本概念及d3库的使用技巧。本文分享了绘制折线图的步骤，包括数据准备、轴的添加以及样式的调整。通过本文，读者可以快速了解在web开发中如何借助三方库绘制折线图。
chart.js实例之曲线图
编程老王
09-24 2692
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> 　<title>Graph</title> </head> <body> <h1>line graph</h1> <canvas id="myLine2Chart"></canvas> <script src=.
利用ichart绘制网页图表
weixin_34212762的博客
11-22 557
首先，最好的教程在这里：ichartjs 有了这个网站，要绘制网页图表简直方便愉快！   接下来说一下使用方法~~~ 进入网站，点击在线设计器 在线设计器的使用方法就不说了，摸索一下就会了！关键在于两个地方： 1. 源代码 这里面的代码直接复制出来，写到我们的jsp文件中就可以直接显示。很方便。 但需要注意的一点是：如果图表中有中文，我们还需要在jsp代码顶端加这么一句， &lt;%@ pag...
介绍一个！非常简单非常方便！制作图表报表的js库 —— ichartjs 【详细操作】...
04-22 151
ichartjs是一个国产的图表库，提供各种api，以及多种样式的图表 图表包括：面积图、2d条形图、2d柱状图、3d柱状图、折线图、饼状图等，并且可以组合图形。 ichart是一个轻量级的js组件，快速构建图表并可跨平台使用 这是ichart的案例展示图，在这个页面我们通过点击view code 查看当前图表调用api的方法 ichart官网api的说明使用的参考文档 ...
jscharts学习
kanaijidaan的专栏
04-04 1279
JSCharts的基本实现 Step1：将下载的jscharts.js放进你的html页面中 Step2：在你的页面中放置用一个标签来作为JSCharts的容器（推荐使用标签），然后给这个容器设置一个独立的id。 Step3：加入一些JavaScript代码读进数据 一个简单的linechart 上面第一行用一维数组定义了5组数据，每组数据代表
python画图曲线图
10-14
要画曲线图，可以使用Python中的matplotlib库。以下是一个简单的例子： ...这个例子中，我们使用`numpy`生成了一组数据，然后使用`matplotlib`的`plot`函数绘制曲线图，最后使用`show`函数显示图像。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值