flot 画任意多条折线

CS 代码
   public ActionResult GetCurveJson(List<CurveShow> cs) 
        {
            string OilOmeterID="";
            string types="";
            int time = 0;
            DataSet ds = new DataSet();
 
            MttcPublic mp = new MttcPublic();
            string[] color=new string[5];
            color[0] = "themeprimary";
            color[1] = "themesecondary";
            color[2] = "themethirdcolor";
            color[3] = "themefourthcolor";
            color[4] = "themefifthcolor";
               Random rd = new Random();
               string jsonshow = "";
               StringBuilder sb = new StringBuilder();
              
            if (cs!=null)
            {
                if (cs.Count>0)
                {
                  
                    for (int i = 0; i < cs.Count; i++)
                    {
                        OilOmeterID = cs[i].OilOmeterID.ToString();
                        types = cs[i].type;
                        time = cs[i].time;
                        DateTime dte = Convert.ToDateTime("2015-08-12 14:35:01.823");
                        string sql =@"  select O_History.*,O_OilOmeter.OilOmeterNum from O_History 
 inner join dbo.O_OilOmeter on dbo.O_OilOmeter.OilOmeterID=O_History.OilOmeterID where O_History.OilOmeterID = " + OilOmeterID + " and TagNameTypeID='" + types + "' and InserTime<'" + dte + "' and InserTime>'" + dte.AddHours(-time) + "'  order by InserTime asc ";
                        SqlDB sd = new SqlDB();
                        DataTable dt = sd.Getdt(sql);
                        if (dt.Rows.Count>0)
                        {
                         //   sb.Append(" { color: " + color[rd.Next(0, 4)] + ",");
                            sb.Append("{"label": "" + dt.Rows[0]["OilOmeterNum"].ToString() + "",");
                            sb.Append(""data":");
                            StringBuilder bu = new StringBuilder();
                            sb.Append(ConstructSBuilder(bu,dt));
                            sb.Append("}|");
                        }
                       
                    }
                    jsonshow=sb.ToString().Substring(0, sb.ToString().Length - 1);
                  
                }
            }
 
 
            return Json(jsonshow.ToString(), JsonRequestBehavior.AllowGet);
        }
        private string ConstructSBuilder(StringBuilder builder, DataTable  dt)
        {
            builder.Append("[");
            foreach (DataRow dr in dt.Rows)
            {
               
                
                    builder.Append("[");
                    builder.Append(DateTime.Parse(dr["InserTime"].ToString()).Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds);
                    builder.Append(",");
                    builder.Append(dr["Value"].ToString());
                    builder.Append("],");
                
            }
            string builderStr = builder.ToString().Substring(0, builder.ToString().Length - 1) + "]";
            return builderStr;
        }

前台 js
var InitiateFlotSelectableChart = function () {
    return {
        init: function () {
                
            var models = [];
            var cboxs = document.getElementById("Menu1").getElementsByTagName("input");
            for (var i = 1; i < cboxs.length; i++) {
                if (cboxs[i].type == 'checkbox' && cboxs[i].checked) {
                    var id = cboxs[i].id.substring(4, cboxs[i].id.length);
                    models.push({ OilOmeterID: id, type: 'TagType-1', time: document.getElementById("ddlTime").value });
                }
            }
            $.ajax({
                type: "POST",
                url: "/OilMeteringWeb/StatisticsStock/GetCurveJson",
                data: JSON.stringify(models),
                contentType: 'application/json; charset=utf-8',
                success: function (sesponseTest) {
                    var data = [];
                     
                   
         
                    data = sesponseTest.split("|");
                    for (var i = 0; i < data.length; i++) {
                        data[i] = jQuery.parseJSON(data[i]);
                    }
                
                    
                    
 
                     
 
                    var options = {
                        series: {
                            lines: {
                                show: true
                            },
                            points: {
                                show: true
                            }
                        },
                        legend: {
                            noColumns: 4
                        },
                        xaxis: {
                            tickDecimals: 0,
                            mode: "time",  //x轴是时间格式
                            color: gridbordercolor
                        },
                        yaxis: {
                            min: 0,
                            color: gridbordercolor
                        },
                        selection: {
                            mode: "x"
                        },
                        grid: {
                            hoverable: true,
                            clickable: false,
                            borderWidth: 0,
                            aboveData: false
                        },
                        tooltip: true,
                        tooltipOpts: {
                            defaultTheme: false,
                            content: "<b>%s</b> : <span>%x</span> : <span>%y</span>",
                        },
                        crosshair: {
                            mode: "x"
                        }
                    };
 
                    var placeholder = $("#selectable-chart");
 
                    placeholder.bind("plotselected", function (event, ranges) {
 
                        var zoom = $("#zoom").is(":checked");
 
                        if (zoom) {
                            plot = $.plot(placeholder, data, $.extend(true, {}, options, {
                                xaxis: {
                                    min: ranges.xaxis.from,
                                    max: ranges.xaxis.to
                                }
                            }));
                        }
                    });
 
                    placeholder.bind("plotunselected", function (event) {
                        // Do Some Work
                    });
 
                    var plot = $.plot(placeholder, data, options);
 
        
                }  });
        }
    };
}();
HTML
   <div id="selectable-chart" class="chart chart-lg"></div> 
就这样把,头疼。 
原文地址:https://www.cnblogs.com/ljh1993/p/4910574.html