flot 可以画任意多条线，不是借助 json ，看这个东西很生气，在这里用json太费劲。

最新推荐文章于 2024-04-24 00:40:05 发布
最新推荐文章于 2024-04-24 00:40:05 发布
阅读量1.3k 收藏
点赞数
文章标签： json string javascript function random button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2004v2004/article/details/6753838
版权
 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
          <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="Scripts/excanvas.min.js"></script><![endif]-->
        <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/jquery.flot.crosshair.js"></script>
       <style type="text/css">
#apDiv1 {
    position:absolute;
    width:600px;
    height:300px;
    z-index:1;
    left: 80px;
    top: 100px;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
      <input class="fetchSeries" type="button"  value="图表"   />
       <div id="placeholder" style="width:600px;height:300px;"></div>
    </form>
</body>
<script type="text/javascript">
    $(function () {
        var options = {
            lines: { show: true },
            points: { show: true },
            xaxis: { tickDecimals: 0, tickSize: 1 }
        };
        var data = [];
        var placeholder = $("#placeholder");

        var adata1;
        $("input.fetchSeries").click(function () {
            var button = $(this);


            var dataurl = "Handler.ashx?id=2&id2="+Math.random();
            function onDataReceived(series) {

                data = series.split("|");
               
                for (var i = 0; i < data.length; i++) {
                    data[i] = jQuery.parseJSON(data[i]);
                }

                $.plot(placeholder, data, options);
                data.length = 0;
            }

            $.ajax({
                url: dataurl,
                method: 'GET',
                //dataType: 'json',
                success: onDataReceived
            });
        });
    });
</script>
</html>

 

 

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
      // context.Response.Write("Hello World");
        string action = context.Request["id"].ToString();
        if (action == "2")
        {
          
            string strSTNM = "ddd1";
            Random ram = new Random();
            string strData = "[1999, 3.0], [2000," + Convert.ToString(ram.NextDouble() * 1000) + "], [2001, 2.0], [2002, 1.2]";
            string la = "{" + "\"" + "label" + "\":" + "\"" + strSTNM + "\"";
            strData = "\"data\":" + "[" + strData + "]";
            string pv1 = la + "," + strData + "}";


            string strSTNM1 = "ddd2";
            string strData1 = "[1999, 4.0], [2000, 400.9], [2001, 8.0], [2002, 1.2]";
            string la1 = "{" + "\"" + "label" + "\":" + "\"" + strSTNM1 + "\"";
            strData1 = "\"data\":" + "[" + strData1 + "]";
            string pv2 = la1 + "," + strData1 + "}";

            string strSTNM2 = "ddd3";
            string strData2 = "[1999, 6.0], [2000, 800.9], [2001, 9.0], [2002, 90.2]";
            string la2 = "{" + "\"" + "label" + "\":" + "\"" + strSTNM2 + "\"";
            strData2 = "\"data\":" + "[" + strData2 + "]";
            string pv3 = la2 + "," + strData2 + "}";

            string strSTNM3 = "ddd4";
            string strData3 = "[1999, 56.0], [2000, 800.9], [2001, 90.0], [2002, 800.2]";
            string la3 = "{" + "\"" + "label" + "\":" + "\"" + strSTNM3 + "\"";
            strData3 = "\"data\":" + "[" + strData3 + "]";
            string pv4 = la3 + "," + strData3 + "}";
            pv1 = pv1 + "|" + pv2 + "|" + pv3 + "|" + pv4;
       
            context.Response.Write(pv1);
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

2004v2004
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图表插件flot
11-27
flot 图表，分布向导，有下一步按钮
android读取JSON数据在百度地图上画线
03-30
用android studio 写的工程，在百度地图上读取json格式的数据 通过添加折线覆盖物画多条线 工程亲测可用
flot插件整合（曲线方法，多轴等）
朝立的博客
09-01 885
只做曲线的插件：echarts（强烈推荐），flot。flot官网： http://www.flotcharts.org/ 实现的效果： 1.自由放大缩小， 2.多条y轴线（或者x轴）， 3.可以选择的显示哪几条线， 4.显示坐标，坐标自由选择， 5.标示线 6……等等 js到官网去下载。 这里只贴整合的代码 <%@ page language="java" cont
Flot画动态折线图 （两条折线动态的）
瞎几把学
07-12 5070
使用了几个例子合起来做出来的这个例子             $(function () {       // 要绘制的数据和数据的数据点数       var data = [], totalPoints = 300;      var data1=[];     // 获得一些随机数据       function getRandom
flot:Jason RomanPHP Flot类，用于将PHP数组转换为Flot JSON格式
05-10
杰森·罗曼（Jason Roman）PHP Flot类 这是一个将PHP系列数据数组转换为Flot可以理解的JSON格式的类。 它支持折线/条形图，饼图，水平/垂直方向和时间序列数据。 它还支持单个或多个系列。 要作为Symfony捆绑包中的...
jquery.flot.addTitle.js:向绘图画布添加标题
06-13
jquery.flot.addTitle.js 向绘图画布添加标题。 安装 在包含 jquery.flot.js 之后，只需包含 jquery.flot.addTitle.js。 例子： < script src =' /flot/jquery.flot.addTitle.js ' > </ script > ...
jquery.flot.navigationControl:Flot 插件在画布层的顶部添加了一些导航控件，以允许用户平移或缩放图形。 这对触摸屏用户更有帮助
07-08
jquery.flot.navigationControl Flot 插件在画布层的顶部添加了一些导航控件，以允许用户平移或缩放图形。 这对触摸屏用户更有帮助。 版权所有 (c) 2013 。 在 MIT 许可下获得许可。 ##Usage:## 在 html 页面的&...
nutsmanager:用PHPJSON编写的PowerWaterGas概述管理器
05-22
它使用JSON文本文件作为值，并通过Bootstrap创建可视面。 这些图是使用flot框架制作的。 它可以帮助我跟踪自己的用电量，并告诉我哪些日子我经常使用，哪些日子我不用。 变更日志 v0.0.6 修复图排序错误 修复其他...
flot 插件 --- 鼠标点击和滑过标签的简单动画
03-30
NULL 博文链接：https://lchshu001.iteye.com/blog/1325410
20190826 - JAVA：JSONPath路径中存在中划线(短横线)'-'
System.out.print(“Hello World!”);
08-26 2131
文章目录1. 背景2. 问题3. 解决 1. 背景 fastjson好 JAVA中使用JSONPath对JsonObject进行求值等操作 2. 问题 使用JSONPath.eval(jsonobject, fieldPath)进行求值时，若路径中含有中划线’-’： String fieldPath ="$.aaa-bbb" 则：此时无法拿到 jsonobject 中属性为 "aaa-bbb...
使用Flot+AJAX绘制图表
weixin_30667649的博客
06-24 155
最近在搞一个软件外包比赛，现在还处于分析设计阶段，还没开始编码阶段，因为团队中我对asp.net编程是稍微熟一点的，所以我负责的模块的编程实现上是比较复杂的模块，这里要实现一个图表统计的功能，在开始之初，指导老师说使用报表来实现这个模块，但是自己感觉特别是报表自己想把它做得美观一点还是比较困难的，在网上发现使用flot来绘制折线图、饼形图还是比较好的选择，所以自己花了一些时间来研究一番....
JavaScript可视化——Flot Ajax数据交互
绝尘
12-23 396
获取AJAX获取数据 异步使用JavaScript和XML方式获取数据的方法叫做Ajax。 源数据 http://api.worldbank.org/regions/?format=json [{ "page": "1", "pages": "1", "per_page": "50", "total": "48" }, [{ "id": "", "code": "AFR...
根据ajax给的json坐标等数据，动态赋值给canvas绘制相应线条笔记、背景图片、平滑曲线
Khun_HWJ的博客
06-09 644
//获取批改详情 $(document).on('click','.homework-hwremark',function(event){ event.stopPropagation();//防止冒泡 var indexs = layer.load(2,{shade: [0.5,'#fff']}); var resultid = $(this).data('resultid'); var data = {resultid:resultid} api.request('/service/ho..
Java面试八股之marshalling和demarshalling
u012151345的博客
04-21 480
Marshalling（序列化）是将内存中的对象状态转化为适合传输或存储的格式（如字节流、JSON、XML），以便进行网络通信、持久化存储或跨平台/语言交互操作。- JSON、XML绑定库：如Jackson、Gson（JSON）和JAXB、XMLBeans（XML），实现对象与数据格式的互转。- 第三方库：如protobuf、Avro、Jackson、Gson，提供更灵活、高效的解决方案。3. 优化性能，减少传输量、提升速度，合理设计降低CPU和内存使用。2. 保证数据安全，通过加密、压缩、校验等手段。
文本文件转JSON格式
最新发布
星霜笔记
04-24 182
资源￥https://kdocs.cn/l/crzS58nUMuN2。资源https://kdocs.cn/l/crzS58nUMuN2。每一行文字与链接用￥分割。
jquery.flot.min.js 使用效果图
06-07
很抱歉，作为一个语言模型AI，我没有屏幕和图形输出功能，无法提供jquery.flot.min.js的使用效果图。但是我可以给您提供一个基本的示例代码和效果： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Flot Example</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script> </head> <body> <div id="placeholder" style="width:600px;height:300px;"></div> <script> var data = [ ["2021-01-01", 10], ["2021-02-01", 20], ["2021-03-01", 30], ["2021-04-01", 40], ["2021-05-01", 50], ["2021-06-01", 60] ]; $.plot("#placeholder", [data], { xaxis: { mode: "time", timeformat: "%Y-%m-%d", tickSize: [1, "month"] }, series: { lines: { show: true }, points: { show: true } }, grid: { hoverable: true } }); </script> </body> </html> ``` 效果图如下所示： ![flot-example](https://user-images.githubusercontent.com/3292694/132103203-7f0f1cfc-8399-4229-9a8a-9cb038e4d8ea.png) 这是一个简单的折线图，使用了jQuery Flot的xaxis选项来处理时间轴。您可以根据自己的需求定制更多的选项和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值