js生成折线图（一条折线或多条折线）

最新推荐文章于 2024-01-09 15:01:39 发布
转载 最新推荐文章于 2024-01-09 15:01:39 发布 · 752 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xiayang123/archive/2012/10/30/2746466.html
文章标签：

#javascript #c# #ViewUI

这篇博客介绍了如何使用JavaScript生成折线图，包括一条或多条折线。代码示例展示了一个自定义的函数`table2`，它接受多个参数，用于创建折线图。博客中提到了JavaScript和C#的标签，可能涉及这两个语言在网页交互中的应用。

参照 http://hi.baidu.com/nkiqzedjqwadpre/item/75dc612087b1530877272c4d ，自己稍微改进了一下。

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HCXYPlanTB1.aspx.cs" Inherits="Modules_Plan_HCXYPlanTB1" %>

<!-- 代码开始===========================================-->
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--[if !mso]>
<style>
v\:*       { behavior: url(#default#VML) }
o\:*       { behavior: url(#default#VML) }
.shape     { behavior: url(#default#VML) }
</style>
<![endif]-->
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
  <title></title>
  <style type="text/css">
    TD
    { FONT-SIZE: 9pt}
  </style>

  <script language="javascript" type="text/javascript">

  function table2(total,table_x,table_y,all_width,all_height,line_no)
  {
   
  //参数含义(传递的数组，横坐标，纵坐标，图表的宽度，图表的高度,折线条数)
  //生成图表函数2——折线图

   
    var line_color = "#69f";
    var left_width = 70;
    var total_no = total[1].length
   
    var temp1,temp2,temp3
    temp1 = 0;
    for(var i=1;i<total_no;i++)
    {
        for(var j=1;j<=line_no;j++)
        {
          if(temp1<total[j][i])
          temp1 = total[j][i];
        }
    }
    temp1 = parseInt(temp1);
    if(temp1>9)
    {
        temp2 = temp1.toString().substr(1,1);
        if(temp2>4)
        {
          temp3 = (temp1/(Math.pow(10,(temp1.toString().length-1)))+1)*Math.pow(10,(temp1.toString().length-1));
        }
        else
        {
          temp3 = (temp1/(Math.pow(10,(temp1.toString().length-1)))+0.5)*Math.pow(10,(temp1.toString().length-1));
        }
    }
    else
    {
        if(temp1>4)
        {
          temp3 = 10;
        }
        else
        {
          temp3 = 5;
        }
    }
    temp4 = temp3;
    document.write("<v:rect id='_x0000_s1027' alt='' style='position:absolute;left:" + (table_x + left_width) + "px;top:" + table_y + "px;width:" + all_width + "px;height:" + all_height + "px;z-index:-1' fillcolor='#9cf' stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>");
    for(var i=0;i<all_height;i += all_height/5)
    {
        document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + left_width + length) + "px," + (table_y + all_height - length - i) + "px' to='" + (table_x + all_width + left_width) + "px," + (table_y + all_height - length - i) + "px' strokecolor='" + line_color + "'/>");
        document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + (left_width - 15)) + "px," + (table_y + i) + "px' to='" + (table_x + left_width) + "px," + (table_y + i) + "px'/>");
        document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + table_x + "px;top:" + (table_y + i) + "px;width:" + left_width + "px;height:18px;z-index:1'>");
        document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + temp4 + "</td></tr></table></v:textbox></v:shape>");
        temp4 = temp4 - temp3/5;
    }
   
    document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + left_width) + "px," + (table_y + all_height) + "px' to='" + (table_x + all_width + left_width) + "px," + (table_y + all_height) + "px'/>");
    document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + left_width) + "px," + table_y + "px' to='" + (table_x + left_width) + "px," + (table_y + all_height) + "px'/>");
   
    var tmpStr = ""
    for(i=1;i<=line_no;i++)
    {
        var re   = /,/g;
        tmpStr += ",[\"" + total[i][0].replace(re,"\",\"") + "\"]"
    }
    tmpStr = tmpStr.substr(1,tmpStr.length-1)
    var line_code = eval("new Array(" + tmpStr + ")")
    for(var j=1;j<=line_no;j++)
    {
        for(var i=1;i<total_no-1;i++)
        {

        var x1 = table_x + left_width + all_width * (i - 1)/(total_no-1)
        var y1 = table_y + (temp3 - total[j][i]) * (all_height/temp3)  
        var x2 = table_x + left_width + all_width * i/(total_no-1)
        var y2 = table_y + (temp3 - total[j][i+1]) * (all_height/temp3)
        var x3 = table_x + left_width + all_width *   (total_no-1)/total_no
        var y3 = table_y + (temp3 - total[line_no][total_no-1]) * (all_height/temp3)
       
      
       
        document.write("<span style='position:absolute; margin-left:"+x1+"px;margin-top:"+(y1-20)+"px; color:#FF0000; font-size:12px;'>"+total[j][i]+"</span>");
        document.write("<span style='position:absolute; margin-left:"+(x3-10)+"px;margin-top:"+(y3-20)+"px; color:#FF0000; font-size:12px;'>"+total[line_no][total_no-1]+"</span>");

        document.write("<v:line id='_x0000_s1025' alt='' style='position:absolute;left:0;text-align:left;top:0;z-index:1' from='" + x1 + "px," + y1 + "px' to='" + x2 + "px," + y2 + "px' coordsize='21600,21600' strokecolor='" + line_code[j-1][0] + "' strokeweight='" + line_code[j-1][1] + "'>");
         
        switch (parseInt(line_code[j-1][2]))
        {
            case 1:
            break;
            case 2:
            document.write("<v:stroke dashstyle='1 1'/>");
            break;
            case 3:
            document.write("<v:stroke dashstyle='dash'/>");
            break;
            case 4:
            document.write("<v:stroke dashstyle='dashDot'/>");
            break;
            case 5:
            document.write("<v:stroke dashstyle='longDash'/>");
            break;
            case 6:
            document.write("<v:stroke dashstyle='longDashDot'/>");
            break;
            case 7:
            document.write("<v:stroke dashstyle='longDashDotDot'/>");
            break;
        }
        document.write("</v:line>");
        switch (parseInt(line_code[j-1][3]))
        {
            case 1:
            break;
            case 2:
            document.write("<v:rect id='_x0000_s1027' style='position:absolute;left:" + (x1 - 2) + "px;top:" + (y1 - 2) + "px;width:4px;height:4px; z-index:2' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
            break;
            case 3:
            document.write("<v:oval id='_x0000_s1026' style='position:absolute;left:" + (x1 - 2) + "px;top:" + (y1 - 2) + "px;width:4px;height:4px;z-index:1' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
            break;
        }

        }
        switch (parseInt(line_code[j-1][3]))
        {
          case 1:
          break;
          case 2:
          if(line_no==1&&total_no==2)
          {
                document.write("<v:rect id='_x0000_s1027' style='position:absolute;left:" + ((table_x + left_width)-2) + "px;top:" + (table_y + (temp3 - total[line_no][line_no]) * (all_height/temp3))    + "px;width:4px;height:4px; z-index:2' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
                document.write("<span style='position:absolute; margin-left:"+(table_x + left_width)+"px;margin-top:"+((table_y + (temp3 - total[line_no][line_no]) * (all_height/temp3)   )-20)+"px; color:#FF0000; font-size:12px;'>"+total[line_no][line_no]+"</span>");
          }
          else
          {
                document.write("<v:rect id='_x0000_s1027' style='position:absolute;left:" + (x2 - 2) + "px;top:" + (y2 - 2) + "px;width:4px;height:4px; z-index:2' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
          }
          break;
          case 3:
          document.write("<v:oval id='_x0000_s1026' style='position:absolute;left:" + (x2 - 2) + "px;top:" + (y2 - 2) + "px;width:4px;height:4px;z-index:1' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
          break;
        }
    }
    for(var i=0;i<total_no-1;i++)
    {
        document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px," + (table_y + all_height) + "px' to='" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px," + (table_y + all_height + 15) + "px'/>");
        document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px;top:" + (table_y + all_height) + "px;width:" + (all_width/(total_no-1)) + "px;height:18px;z-index:1'>");
        document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");
    }
   
    var tb_height = 30
    document.write("<v:rect id='_x0000_s1025' style='position:absolute;left:"+(table_x+all_width+20)+"px;top:"+table_y + "px;width:100px;height:" + (line_no * tb_height + 20) + "px;z-index:1'/>");
    for(var i=0;i<line_no;i++)
    {
        document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + all_width + 25) + "px;top:" + (table_y + 10+(i) * tb_height) + "px;width:60px;height:" + tb_height + "px;z-index:1'>");
        document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + line_code[i][4] + "</td></tr></table></v:textbox></v:shape>");
        document.write("<v:rect id='_x0000_s1040' alt='' style='position:absolute;left:" + (table_x + all_width + 80 ) + "px;top:" + (table_y + 10 + (i) * tb_height + 4) + "px;width:30px;height:20px;z-index:1' fillcolor='" + line_code[i][0] + "'><v:fill color2='" + line_code[i][0] + "' rotate='t' focus='100%' type='gradient'/></v:rect>");
    }
  }
  </script>

</head>
<body style="margin-top: 5px; margin-left: 0px; overflow: auto;">
  <form id="form1" runat="server">
    <asp:HiddenField ID="hidBillNo" runat="server" />
    <asp:HiddenField ID="hidSHDate" runat="server" />
    <asp:HiddenField ID="hidSHDJ" runat="server" />
    <asp:HiddenField ID="hidMaName" runat="server" />

    <script language="javascript" type="text/javascript">

    var strSHDate = document.getElementById("hidSHDate").value;
    var date = strSHDate.split(","); 
    var strSHDJ = document.getElementById("hidSHDJ").value;
    var dj= strSHDJ.split(",");
    var dateArray = new Array();
    var djArray   = new Array();
    for (var i = 0;i<date.length-1;i++)
    {
        for( var j = 0;j<dj.length-1;j++)
        {
            if(i==j)
            {
                djArray[0]="#FF0000,1.5,1,2,"+document.getElementById("hidMaName").value+""
                djArray[i+1] = parseInt(dj[i])
                dateArray[i] = date[i]
            }
        }
    }
    var total = new Array(dateArray,djArray)    //参数含义（时间(横坐标)，单价(纵坐标)）
    table2(total,50,50,strSHDJ.length*40,250,1);    //参数含义(传递的数组，横坐标，纵坐标，图表的宽度，图表的高度,折线条数)
    </script>

  </form>
</body>
</html>
<!-- 代码结束===========================================-->

转载于:https://www.cnblogs.com/xiayang123/archive/2012/10/30/2746466.html

JavaScript实现折线图
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 633
JavaScript实现折线图
用Vue3和Plotly.js生成多折线图
最新发布
ScriptEcho的博客
06-28 671
本代码示例展示了如何使用 Plotly.js 库创建交互式折线图。用户可以在图中点击点以添加注释，从而实现数据可视化和探索。此功能可广泛应用于数据分析、科学研究和教育等领域。使用 Plotly.js 绘制三条折线图，每条线对应一个数据集。当用户点击图中的点时，会在该点处添加一个注释，显示点的 x 和 y 坐标。用户可以点击多个点，在图中添加多个注释。开发这段代码的过程让我深入了解了 Plotly.js 库和交互式图表绘制的技术。
JS解析xlsx,生成折线图
12-24
js解析Excel文件，解析后的数据用Echarts折线图展示,希望对大家有用~
js绘制折线图
03-20
相当轻量级的js代码绘制折线图； 自己看过代码之后可以很快嵌入到各种报表中； 数据获取方式灵活，特别适合需要动态获取数据来产生折线图的情形；
原生js实现折线图（canvas详解）
kitty_ELF的博客
04-16 8104
这篇文章的起源就是之前用的都是ECharts突然有一天想自己用js手写一个折线图，所以我就从canvas开始学习了。 首先给大家看一下通过学习，我最后完成的折线图： 内容： x轴及平行刻度线 x轴、y轴坐标刻度 折点的数据显示 缺点： 线条样式的动态变换 y轴刻度算法 一点都不酷炫！！！ 一、Canvas介绍1、画布的创建2、设置画布的宽高和背景色3、设置渐变色3.1、线性渐变3.2、放射状/圆形渐变4、画布的变换4.1画布平移（translate）4.2、画布旋转（rotate）4.3 画布缩
javascript 动态生成svg 折线图像
热门推荐
fuqinyijiu的专栏
11-20 1万+
首先 function init2(){ var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "800"); svg.setAttribute("height", "500"); svg.addEventListener("loa
Echarts动态加载多条折线图的实现代码
10-16
动态加载多条折线图即在网页上根据需要加载不同的数据集，动态地展示多条折线在同一个图表上的变化。 在具体实现上，文章首先给出了动态加载多条折线图的基本思路。通过监听某个事件（如用户输入、时间变化等），...
echarts多条折线图动态分层的实现方法
10-16
最后，当 `param.option_type` 等于 6 时，执行上述代码，生成多条折线图。如果需要根据实际需求调整图表的样式或行为，可以通过修改 `option` 对象的各个属性来实现。 总结起来，实现 ECharts 多条折线图动态分层...
d3.js实现自定义多y轴折线图的示例代码
10-18
本文介绍如何使用d3.js实现自定义多y轴折线图，让我们通过几个重要的知识点来详细解析。 首先，要使用d3.js绘图，我们需要初始化一个SVG（Scalable Vector Graphics）容器，用来承载所有的图形元素。SVG是一种基于...
asp生成折线图
03-25
5. JavaScript交互：在HTML页面加载完成后，JavaScript代码会读取嵌入的数据，调用图表库的API生成折线图。例如，使用Chart.js，你可以创建一个新的`Chart`实例，指定图表类型（这里是折线图），并传递数据和配置...
js动态折线图
07-19
含案例 画圆形 直线 椭圆形 动态添加div画线 绝对有用
js做折线图
06-25
js做折线图
JS生成多种图形(饼状图,柱状图,折线图,雷达图
02-02
JS生成多种图形(饼状图,柱状图,折线图,雷达图
javascript 折线图
05-20
简单了点，不过很实用简单了点，不过很实用 简单了点，不过很实用简单了点，不过很实用
js实现折线图
09-04
js实现曲线图，调用js特效，方便简单修改
【数据可视化】【1】手把手教你使用d3.js绘制折线图
C++程序猿
01-09 3674
借助于强大的d3.js实现折线图的绘制，涵盖了数据可视化的基本概念及d3库的使用技巧。本文分享了绘制折线图的步骤，包括数据准备、轴的添加以及样式的调整。通过本文，读者可以快速了解在web开发中如何借助三方库绘制折线图。
JS 折线图
weixin_30553837的博客
05-17 900
JS 折线图 echarts 折线图。需要引入：echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8" type="text/javascript"></script> JS调用后台方法，得到数据 Map<String, Object&...
JavaScript Canvas 实现自定义多折线图
灵神翁的博客
01-19 1090
JavaScript Canvas 实现自定义多折线图 大家好，我是梦辛工作室的灵，今天给大家讲一讲如何实现一个好看的自定义多折线图，按惯例来，先看实现效果如下： 画面效果还是可以吧，颜色和内容都可以自定义哦，给大家讲一下我的绘制逻辑，我们需要将绘图封装成一个对象，并先给定一些默认值，比如画布的宽和高，我们将画布分成上下两部分，定义上面30%用于绘制标题和留出一些空白，图表占用60%，剩下的10...
ASP与MDB数据库交互生成折线图教程
在ASP中，可以使用内置的图形功能，例如VML（Vector Markup Language）或第三方图形库来生成折线图。 5. VML技术: VML（Vector Markup Language）是一种基于XML的矢量图形语言，用于在网页上绘制矢量图形，如线条、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值