`
pxchen
  • 浏览: 85187 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js曲线图

    博客分类：
  • js
VC++prototype 
阅读更多
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
LinkedList list=new LinkedList();
for(int i=0;i<18;i++){

list.add((i+1)+"月");
list.add(i+1);
list.add(i*50);
list.add("第"+(i+1)+"个点");
}
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>曲线</title>
<STYLE TYPE="text/css">
v\:* { behavior: url(#default#VML);} o\:* { behavior: url(#default#VML);}
body {
    margin:0px;
    padding:0px;
    font-size:12px;
    text-align:left
}

.pBlack {
    font-weight:bold;
    font-size:12px;
}

.pRed {
    font-weight:bold;
    font-size:12px;
    color:#FF0000;
}

/*横坐标轴样式*/
.pMonth {
    font-size:66px;
    font-family:"黑体";
    color:#CCCCCC;
    letter-spacing: 3px;
}

/*提示信息样式*/
.ToolTip {
    padding:4px;
    margin:4px;
    background-color: #CCCCCC;
    border: 1px solid #0066FF;
    text-align:left;
}

/*标题显示样式*/
.Title {
    font-family:"宋体", "华文仿宋";
    font-size:16px;
    text-align:center;
    font-weight:bold;
    color:#996600;
    vertical-align:middle;
}

.curveBody{
    margin:0;
    padding:0;
    height:20px;
    font-size:12px;
}

.curveForm{
    margin:0;
    padding:0;
    height:20px;
    font-size:12px;
}
</STYLE>
<script language="javascript">
<!--
/* 说明: JS和VML画曲线图
* 作者：<a href="<a href="http://www.freeage.cn" target="_blank">http://www.freeage.cn</a>" target="_blank">梦想年华</a>
* 邮箱：fanwsp@126.com
* 主页：<a href="<a href="http://www.FreeAge.cn" target="_blank">http://www.FreeAge.cn</a>" target="_blank">自由时代</a> [<a href="<a href="http://www.freeage.cn" target="_blank">http://www.freeage.cn</a>" target="_blank"><a href="http://www.freeage.cn" target="_blank">http://www.freeage.cn</a></a>]
* 申明：转载，使用，修改请保存上面的版权申明
*/
function VMLCurve(objDiv){

this.objDiv = objDiv; // obj
this.toolTips    = ""; // 提示信息
this.configXPerValue = 0;
    this.configYPerValue = 0;
    this.configXMinValue = 0;
    this.configYMinValue = 0;

this.OriginXValue = 0; // 圆点坐标
this.OriginYValue = 0;

//定义区域参数
this.group = null; // v:group
this.n = 1 // 倍数
this.gpWidth = 700; // Width
this.gpHeight = 350; // Height

this.configXTextLeft = -10; // 定义 X轴坐标值左边离坐标距离
this.configXTextTop = 10; // 定义 X轴坐标值上方离X轴的距离

this.configYLeft = 60; // 定义 Y轴距对象左边的距离
this.configYTextRight = 40; // 定义 Y轴坐标值离Y轴右边的距离
this.configYTextBottom = 5; // 定义 Y轴坐标值离坐标下边距离

//X轴值
this.configXValue = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
//Y轴值
this.configYValue = new Array('100','200','300','400','500','600','700','800','900','1000');

// Init BackGround
this.Background = null;
this.bgColor = "#C4E1FF"; // BackGround Color

// Init ToolTip
this.configToolLeft = 15;
this.configToolTop = 15;
this.ToolTip = document.createElement("DIV");
this.ToolTip.className = "ToolTip";
this.ToolTip.id = "ToolTip";
this.ToolTip.style.zIndex = "100";
this.ToolTip.style.position = "absolute";
this.ToolTip.style.display = "none";
this.ToolTip.innerHTML = "";

//设置点线的属性
this.PointRadius = 5; //圆点的半径大小
this.LineSize    = 2;                  //线的大小
this.PointColor  = "#FF6600"; //点的颜色
this.LineColor   = "#FF6600"; //线的颜色

this.Points = "";
this.PreviousPointY = 0;
this.PointsYCount   = 0;
}

// Init
VMLCurve.prototype.init = function(strObj,strTitle){

this.gpcX = this.gpWidth/this.n; // coordsize X
this.gpcY = this.gpHeight/this.n; // coordsize Y

this.configXLen   = this.gpWidth - this.configYLeft*2+20; // 定义 X轴长度
this.configYLen   = this.gpHeight- 100; // 定义 Y 轴长度
this.configXNum = this.configXValue.length; // X轴刻度数
this.configYNum = this.configYValue.length; // Y轴刻度数

    this.configXTop = this.configYLen+20; //定义 X轴距对象上边的距离

this.configXPerLen = str2Float((this.configXLen-20)/this.configXNum,2); //定义 X轴每刻度长度
this.configYPerLen = str2Float((this.configYLen-20)/this.configYNum,2); //定义 Y轴每刻度长度


//初始化背景参数
this.bgWidth = this.gpWidth; // Height
this.bgHeight = this.gpHeight; // Width

if(this.configYPerValue!=0){
        var tempArr = new Array(this.configYNum);
        for(var i=0;i<this.configYNum;i++){
        tempArr[i] = str2Float(this.configYMinValue+this.configYPerValue*i,2);
        }
        this.configYValue = tempArr;
}
    else {
        this.configYPerValue = str2Float((this.configYValue(this.configYNum)-this.configYMinValue)/this.configYNum,2);
    }
   
   if(this.configXPerValue!=0){
        var tempArr = new Array(this.configXNum);
        for(var i=0;i<this.configXNum;i++){
        tempArr[i] = str2Float(this.configXMinValue+this.configXPerValue*i,2);
        }
        this.configXValue = tempArr; 
}else{
         //this.configXPerValue = str2Float((this.configXValue(this.configXNum)-this.configXMinValue)/this.configXNum,2);
    }

    this.configYValue  = this.configYValue.reverse(); //倒序数组
this.createGroup();
this.createBackgroud();
this.createCoordinate();
this.createXTableLine();
this.createYTableLine();
this.createToolTip();

this.setTitle(strTitle);
this.strObj = strObj;
}

//建立画图区域
VMLCurve.prototype.createGroup = function() {
this.group = document.createElement("<v:group ID=\"group1\" coordsize=\""+this.gpcX+","+this.gpcY+"\" style=\"z-index:-10;width:"+this.gpWidth+"px;height:"+this.gpHeight+"px\">");
this.objDiv.insertBefore(this.group);
}

//填充背景
VMLCurve.prototype.createBackgroud = function() {
this.Background = document.createElement("<v:rect fillcolor=\"white\" strokecolor=\"black\" style=\"z-index:-8;width:"+this.bgWidth+"px;height:"+this.bgHeight+"px\" />");
this.Background.insertBefore(document.createElement("<v:fill rotate=\"t\" type=\"gradient\" color2=\""+this.bgColor+"\" />"));
this.Background.insertBefore(document.createElement("<v:shadow on=\"t\" type=\"single\" color=\"silver\" offset=\"3pt,3pt\" />"));
this.group.insertBefore(this.Background);
}

//建立坐标轴
VMLCurve.prototype.createCoordinate = function() {
var pointX1 = this.configYLeft + "," + this.configXTop;
var pointX2 = this.configYLeft+this.configXLen + "," + this.configXTop;
var pointY1 = pointX1;
var pointY2 = this.configYLeft + "," + eval(this.configXTop-this.configYLen);
this.createCoordinateLine(pointY1,pointX2);
this.createCoordinateLine(pointY1,pointY2);
this.setOriginValue(this.OriginXValue,this.OriginYValue);
}

//建立坐标线
VMLCurve.prototype.createTableLine = function(xPoint,yPoint,sTableColor){
var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\""+sTableColor+"\" style=\"Z-INDEX:8;POSITION:absolute;/>");
this.group.insertBefore(tempLine);
tempLine.insertBefore(document.createElement("<v:stroke dashstyle=\"Solid\" />"));
}

//画坐标轴线
VMLCurve.prototype.createCoordinateLine = function(xPoint,yPoint){
var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\"#FF6600\" strokeweight=\"1px\" style=\"Z-INDEX:8;POSITION:absolute;\"/>");
this.group.insertBefore(tempLine);
tempLine.insertBefore(document.createElement("<v:stroke  EndArrow=\"classic\" />"));
}

//创建文本提示信息
VMLCurve.prototype.createText = function(xLeft,xTop,sText,sClass) {
var tempObj = document.createElement("<P class=\""+sClass+"\" style=\"Z-INDEX:8;LEFT:"+xLeft+"px;POSITION:absolute;TOP:"+xTop+"px;\"/>");
tempObj.innerHTML = sText;
this.group.insertBefore(tempObj);
}

// 创建X坐标网格线
VMLCurve.prototype.createXTableLine = function(){
var x1,y1,x2,y2,point1,point2,sTableColor;
sTableColor = "#CCCCCC";
for(var i=0;i<this.configXValue.length;i++){
x1 = eval(this.configYLeft + this.configXPerLen*(i+1));
y1 = eval(this.configXTop-this.configYLen)+10;
x2 = x1;
y2 = eval(this.configXTop+5);
point1 = x1 + "," + y1;
point2 = x2 + "," + y2;
    this.createTableLine(point1,point2,sTableColor);
    this.createText(x1+this.configXTextLeft,this.configXTop+this.configXTextTop,this.configXValue[i],"pBlack");
}
}

//创建Y轴坐标网格线
VMLCurve.prototype.createYTableLine = function(){
var x1,y1,x2,y2,point1,point2,sTableColor;
for(var i=0;i<this.configYValue.length;i++){
x1 = eval(this.configYLeft - 5);
y1 = eval(this.configXTop - this.configYPerLen*(i+1));
x2 = eval(this.configYLeft + this.configXLen - 10);
y2 = y1;
point1 = x1 + "," + y1;
point2 = x2 + "," + y2;
    if(this.configYValue[this.configYValue.length-i-1]=="C2") sTableColor="#FF9900";
else sTableColor = "#CCCCCC";
this.createTableLine(point1,point2,sTableColor);
this.createText(this.configYLeft-this.configYTextRight,y1-this.configYTextBottom,this.configYValue[this.configYValue.length-i-1],"pBlack");
}
}


//设置标题
VMLCurve.prototype.setTitle = function(strTitle){
var tempObj = document.createElement("<div class=\"Title\" style=\"POSITION:absolute;Z-INDEX:9;LEFT:"+40+"px;TOP:"+(this.configXTop+40)+"px;width:"+(this.configXLen)+"px;height:"+(this.gpHeight-this.configXTop-20)+";/>");
tempObj.innerHTML = strTitle;
this.group.insertBefore(tempObj);
}

// 画圆点坐标
VMLCurve.prototype.setOriginValue = function(x,y){
this.createText(this.configYLeft+this.configXTextLeft,this.configXTop+this.configXTextTop,x,"pBlack");
this.createText(this.configYLeft-this.configYTextRight,this.configXTop-this.configYTextBottom,y,"pBlack");
}


// 设置圆点坐标属性
VMLCurve.prototype.setPointsProp = function(sPointRadius,sLineSize,sPointColor,sLineColor){
PointRadius = sPointRadius; //圆点的半径大小
LineSize    = sLineSize;          //线的大小
PointColor  = sPointColor; //点的颜色
LineColor   = sLineColor; //线的颜色
}


// 设置纵坐标的值
VMLCurve.prototype.setPointsValue = function(xValueArr,yValueArr,sValueArr){
    var sValue  = "";
    var xValue  = 0;
var yValue  = 0;
var tempLen = 0;
var thisX   = 0;
var thisY   = 0;
var tempX   = 0;
    var tempY   = 0;
for(var i=0;i<xValueArr.length;i++){
        thisX   = str2Float(xValueArr[i],2);
        thisY   = str2Float(yValueArr[i],2);
        sValue  = sValueArr[i];
        //tempX   = str2Float((thisX - this.OriginXValue)/this.configXPerValue,2);
tempY   = str2Float((thisY - this.OriginYValue)/this.configYPerValue,2);
xValue  = str2Float(this.configYLeft + str2Float(thisX*this.configXPerLen,2),2);
yValue  = str2Float(this.configXTop - str2Float(tempY*this.configYPerLen,2),2);
sValue  += "<br>坐标值[X,Y]:[" + xValue + "," + yValue + "]";
sValue  += "<br>实际值[X,Y]:[" + thisX + "," + thisY + "]";
        //this.PointsYCount  += str2Float(yValueArr[i],2);
//this.PreviousPointY = yValueArr[i];
this.Points = this.Points + xValue + "," + yValue + " ";
this.createPoint(xValue,yValue,sValue);
}
this.createCurveLine();
this.PreviousPointY = 0;
this.Points         = 0;
this.PointsYCount   = 0;
}


// create Point
VMLCurve.prototype.createPoint = function(sLeft,sTop,sText){
//根据圆点的坐标,得到左上方点的坐标
var xLeft  = sLeft - this.PointRadius;
var xTop   = sTop  - this.PointRadius;
var tempOval = document.createElement("<v:oval style=\"POSITION:absolute;Z-INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:"+2*this.PointRadius+";height:"+2*this.PointRadius+";cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor+"\" strokeweight=\"1px\" onmousemove=\""+this.strObj+".setToolTip('block','" + sText + "'," + sLeft + "," + sTop + ");\" onmouseout=\""+this.strObj+".setToolTip('none','');\"/>");
group1.insertBefore(tempOval);
}

//以两点为坐标画线
VMLCurve.prototype.createCurveLine = function(){
var tempLine = document.createElement("<v:PolyLine Points=\""+ this.Points +"\" style=\"Z-INDEX:11;POSITION:absolute;\" strokeweight=\"2px\" filled=\"f\" />");
var newStroke = document.createElement("<v:stroke dashstyle='solid' color='"+this.LineColor+"'/>");
group1.insertBefore(tempLine);
tempLine.insertBefore(newStroke);
}


VMLCurve.prototype.createToolTip = function(){
this.group.insertBefore(this.ToolTip);
}

VMLCurve.prototype.setToolTip = function(sVisitable,sContent,x,y){
this.ToolTip.style.pixelLeft = x + this.configToolLeft;
this.ToolTip.style.pixelTop = y + this.configToolTop;
this.ToolTip.style.display = sVisitable;
if(this.ToolTip.innerHTML==""){
this.ToolTip.innerHTML = sContent;
}
if(sContent==""){
this.ToolTip.innerHTML = "";
}
}


/*以下代码来自网络,主要功能是对数字进行格式化
*原作者不详，敬请谅解。
*/
/*********************************
* 字符串转换为数字(""-->0)as_type--str,num
* 参数说明:
as_str--转换的字符串
ai_digit--转换的小数位数(null--不限制小数位数,0--转换为整型,>0按小数位数转换)
as_type--转换后返回的类型(null,"num"--转换为数字类型,"str"--转换为字符串
(按小数格式化后的字符串)
* 例如:
* str2float("10.2124568795")返回float类型10.2124568795
* str2float("10.6",0)返回Int类型11(使用四舍五入的方法)
* str2float("10.2",2)返回float类型10.1
* str2float("10.2",2,"str")返回String类型"10.20"(按小数位数格式化字符串)
* str2float("10.216",2)返回float类型10.22
* str2float("10.216",2,"str")返回String类型"10.22"
*********************************
*/
function str2Float(as_str,ai_digit,as_type)
{
   var fdb_tmp = 0;
   var fi_digit = 0;
   var fs_digit = "1";
   var fs_str = "" + as_str;
   var fs_tmp1 = "";
   var fs_tmp2 = "";
   var fi_pos = 0;
   var fi_len = 0;
   fdb_tmp = parseFloat(isNaN(parseFloat(fs_str))?0:fs_str);
  
   switch (true)
   {
  case (ai_digit==null):       //不改变值,只转换为数字
fdb_tmp = fdb_tmp;
break;
  case (ai_digit==0):          //取得整数
fdb_tmp = Math.round(fdb_tmp);
break;
  case (ai_digit>0):            //按照传入的小数点位数四舍五入取值
for (var i=0;i<ai_digit;i++) fs_digit +="0";
fi_digit = parseInt(fs_digit);
fdb_tmp = Math.round(fdb_tmp * fi_digit) / fi_digit;
if (as_type=="str")
{
fs_tmp1 = fdb_tmp.toString();
fs_tmp1 +=((fs_tmp1.indexOf(".")!=-1)?"":".") + fs_digit.substr(1);
fi_pos = fs_tmp1.indexOf(".") + 1 + ai_digit;
fdb_tmp = fs_tmp1.substr(0,fi_pos);
}
break;
   }
   return fdb_tmp;
}
//-->
</script>

<style type="text/css">
<!--
v\:* { behavior: url(#default#VML);} o\:* { behavior: url(#default#VML);}
body {
margin:0px;
padding:0px;
font-size:12px;
text-align:left
}

.pBlack {
font-weight:bold;
font-size:12px;
}

.pRed {
font-weight:bold;
font-size:12px;
color:#FF0000;
}

/*横坐标轴样式*/
.pMonth {
font-size:66px;
font-family:"黑体";
color:#CCCCCC;
letter-spacing: 3px;
}

/*提示信息样式*/
.ToolTip {
padding:4px;
margin:4px;
background-color: #CCCCCC;
border: 1px solid #0066FF;
text-align:left;
}

/*标题显示样式*/
.Title {
font-family:"宋体", "华文仿宋";
font-size:16px;
text-align:center;
font-weight:bold;
color:#996600;
vertical-align:middle;
}

.curveBody{
margin:0;
padding:0;
height:20px;
font-size:12px;
}

.curveForm{
margin:0;
padding:0;
height:20px;
font-size:12px;
}
-->
</style>
</head>

<body class="curveBody">
<form action="" name="for1">
<input type="hidden" value="<%=list %>" name ="list">
<br><br>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td height="20"><div align="center" id="curve"></div></td></tr>
</table>

<script language="javascript">

//建立曲线对象
var vc = new VMLCurve(document.all.curve);
vc.configXValue = new Array();
var list=document.all.for1.list.value;
var listArray=list.split(",");
//建立曲线对象
//vc.configXValue = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
//var xValueArr = new Array(1,2,3,4,5,6,7,8,9,10,11,12); //X轴数据，
//var yValueArr = new Array(320,280,420,550,600,700,800,720,190,940,590,340); //Y轴数据
//var sValueArr = new Array('第1个点','第2个点','第3个点','第4个点','第5个点','第6个点','第7个点','第8个点','第9个点','第10个点','第11个点','第12个点'); //提示信息
vc.configXValue = new Array();
var xValueArr = new Array();
var yValueArr = new Array();
var sValueArr = new Array();
var i;

for(i=1;i<=listArray.length/4;i++){

vc.configXValue[i-1]=listArray[(i-1)*4];
xValueArr[i-1]=listArray[parseInt((i-1)*4)+1];
yValueArr[i-1]=listArray[parseInt((i-1)*4)+2];
sValueArr[i-1]=listArray[parseInt((i-1)*4)+3];
}

//设置X坐标值，从左至右


//设置Y坐标轴
vc.configYPerValue = 100;
    vc.configYMinValue = 100;
//vc.configYValue = new Array(100,200,300,400,500,600,700,800,900,1000);
vc.init("vc","曲线图");

//用数组设置点的横纵标值及提示信息

//设置圆点的属性
vc.setPointsProp(5,1,'#FF6600','#FF6600');
vc.setPointsValue(xValueArr,yValueArr,sValueArr);
</script>

</form>


</body>
</html>

分享到：
评论
1 楼 emilyHong 2011-03-14  
不过有没有多条线的？
发表评论

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

相关推荐

    各种JS曲线图效果

    在JavaScript中，有多个库可以帮助我们轻松创建曲线图，如D3.js、Chart.js、ECharts、Highcharts等。D3.js（Data-Driven Documents）是一个强大的数据可视化库，允许开发者直接操作DOM来绑定任意数据，并且提供了...

    JavaScript曲线图

    ### 标题：JavaScript曲线图 这一标题直接指出了文章的主题是关于使用JavaScript来创建曲线图。在现代Web开发中，动态生成图表是一种常见需求，尤其是在数据可视化领域。JavaScript提供了多种库和框架来帮助开发者...

    js曲线图类,用JS脚本实现的曲线图

    在JavaScript中，我们通常借助库如Chart.js、D3.js或Highcharts等来快速构建曲线图。然而，如果你想要从基础开始实现一个简单的曲线图，以下是一些基本步骤： 1. **HTML布局**：在HTML中创建一个canvas元素，它是...

    flash js 曲线图+饼状图+柱状图绚丽插件

    本文将深入探讨“flash js 曲线图+饼状图+柱状图绚丽插件”这一主题，这是一组用于创建动态、交互式数据可视化的工具。 首先，让我们关注“曲线图”。曲线图，也称为折线图，是一种表示数值数据趋势的有效方式。在...

    使用D3.js库绘制曲线图

    在本例中，我们将探讨如何使用D3.js来绘制曲线图。 首先，我们需要了解XML文件的作用。XML（可扩展标记语言）是一种用于存储和传输结构化数据的标准格式。在这个场景中，XML文件很可能包含了用来绘制曲线图的数据点...

    Chartjs曲线图、柱状图、饼状图等多种统计图

    Chart.js是一款轻量级的JavaScript库，专门用于创建各种类型的统计图表，如曲线图、柱状图和饼状图等。它以其简单易用、高效和可定制化的特性深受开发者喜爱，广泛应用于数据可视化项目中。下面将详细介绍Chart.js在...

    js 曲线图 报表 柱状图 饼图 雷达图 实例源码

    JavaScript（简称JS）作为浏览器端最常用的语言，提供了丰富的库和框架用于创建各种图表，如曲线图、报表、柱状图、饼图和雷达图。这些图表有助于将复杂的数据以直观、易于理解的方式呈现出来，对于业务分析、决策...

    js实现各种曲线图+柱状图+饼状图。。

    实现多种柱状图，饼状图，曲线图，以及图表等

    JS绘制曲线图源码

    这里，`&lt;canvas&gt;`元素用于绘制曲线图，`&lt;script&gt;`标签引入了名为`curve.js`的JavaScript文件，该文件包含了绘制曲线图的逻辑。 2. **JavaScript基础**：`js/curve.js`文件中，我们将用JavaScript处理数据并绘制曲线...

    js+html实现曲线图

    总结起来，通过结合HTML和JavaScript，我们可以利用像Chart.js这样的库轻松地在网页上创建曲线图。这不仅使数据可视化变得更加直观，也为用户提供了一个交互式的体验。在实际项目中，可以根据需求进一步调整和扩展...

    html5+js的数据仿股票模拟曲线图

    总的来说，"html5+js的数据仿股票模拟曲线图"是一个利用HTML5和JavaScript技术实现的动态可视化工具，它展示了如何通过这两种技术高效地处理和展示大数据，为用户提供了直观、生动的数据理解方式。对于开发者来说，...

    highcharts.js实现曲线图、柱状图、面积图等

    Highcharts.js是一款强大的JavaScript图表库，它允许开发者轻松地在网页上创建各种动态、交互式的图表，包括曲线图、柱状图、面积图等多种图表类型。这个库以其易用性、灵活性和丰富的定制选项而受到广泛欢迎。在...

    一个由JS实现的曲线图

    一个由JS实现的曲线图，思路清晰，代码工整，可以用来学习和借鉴。

    flex实时更新曲线图

    它基于ActionScript和MXML，提供了丰富的用户界面组件库，包括各种图表组件，如曲线图。在本例中，"flex实时更新曲线图"涉及到的技术核心是Flex中的图表组件和数据驱动更新。 1. **Flex图表组件**：Flex提供了多种...

    html曲线图技术资料

    HTML（HyperText Markup Language）本身并不具备绘制图形的能力，但它可以与CSS（Cascading Style Sheets）和JavaScript一起工作，借助于库如Chart.js、D3.js等，实现动态和交互式的曲线图。以下是一些关键知识点： ...

    raphaelJS制作图表、饼图、柱状图、曲线图

    在这个主题中，我们将深入探讨如何使用Raphaël.js 制作图表，包括饼图、柱状图和曲线图。 1. **饼图**：饼图是一种展示数据比例关系的有效方式。在Raphaël中，创建饼图通常涉及以下几个步骤： - 初始化画布：...

    js饼状图+柱状图+曲线图

    本文将详细讲解使用JavaScript实现饼状图、柱状图和曲线图的相关知识点。 首先，饼状图是一种常用于表示部分与整体之间关系的数据图形，每个扇区代表一个类别，其大小与该类别的比例成正比。JavaScript中实现饼状图...

    关于JSChart曲线图的完整包(js源码)

    js包里有柱形图、曲线图及圆饼图,效果灰常棒,需要的朋友可以下载,密码：shrimp

    支付宝芝麻曲线图

    JavaScript库，如Chart.js、Highcharts或前面提到的D3.js，可以帮助创建动态、交互式的曲线图。 - 响应式设计也可能被用到，确保图表在不同设备上都能正确显示。 5. **后端接口**： - 芝麻信用分数的获取通常需要...

    Flash曲线图大全

    amcharts_2.2.1.zip FusionCharts JS+FLASH曲线图、饼图显示js+flash曲线图.zip

Magicbox
Global site tag (gtag.js) - Google Analytics