C#-折线图-从数据苦衷读取数据

先来张效果图:

View部分:

@{
    ViewBag.Title = "Home Page";
    Layout = null;
    string date1 = "";
    string date2 = "";
    if (ViewBag.date1!=null)
    {
        date1 = ViewBag.date1;
    }
    if (ViewBag.date2 != null)
    {
        date2 = ViewBag.date2;
    }
}

<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery.ui.datepicker-zh-CN.js"></script>
@*<script src="~/Scripts/jquery.easyui.min.js"></script>*@
<script src="~/Scripts/echarts.min.js"></script>
<script>
    $(function() {
        $("#startdate").datepicker();
        $("#enddate").datepicker();
    });
</script>

<div>
    <form method="post" action="/Home/Index">
        <label>起始日期</label><input name="startdate" id="startdate" value="@date1">
        <label>结束日期</label><input name="enddate" id="enddate" value="@date2">
        <input type="submit" value="查询">
    </form>
</div>

<div id="main" style="width: 900px;height:400px;margin-top:100px">
</div>
<script type="text/javascript">

    // 基于准备好的dom,初始化echarts实例

    var myChart = echarts.init(document.getElementById(‘main‘));

    var option = {
        title: {
            text: ‘询问房间使用情况统计‘
        },
        tooltip: {},
        legend: {
            data: [‘使用次数‘]
        },
        xAxis: {
            data:@MvcHtmlString.Create(ViewBag.dateList),
        },
        yAxis: {},
        series: [{
            name: ‘次数‘,
            type: ‘line‘,
            data: @ViewBag.countList,
        }]
    };

    myChart.setOption(option);

</script>

Controller部分:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Echarts动态数据.ADO;
using Newtonsoft.Json;
namespace Echarts动态数据.Controllers
{
    public class HomeController : Controller
    {
        ProcuracyRoom_testEntities db;

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        [ActionName("Index")]
        public ActionResult IndexPost()
        {
            string date1 = Request.Form["startdate"];
            ViewBag.date1 = date1;//开始时间
            string date2 = Request.Form["enddate"];
            ViewBag.date2 = date2;//结束时间
            DateTime startdate = Convert.ToDateTime(date1);
            DateTime enddate = Convert.ToDateTime(date2).AddDays(1);
            db = new ProcuracyRoom_testEntities();            

            var q = from t in db.RoomApplication
                    where t.UseDate >= startdate && t.UseDate < enddate && t.State > 0
                    group t by t.UseDate into g
                    select new { date = g.Key, count = g.Count() };
            var list = q.ToList();
            string[] dateList = (from t in list select t.date.ToShortDateString()).ToArray();
            string s = JsonConvert.SerializeObject(dateList);
            ViewBag.dateList = s;
            int[] countList = (from t in list select t.count).ToArray();
            string s1 = JsonConvert.SerializeObject(countList);
            ViewBag.countList = s1;
            return View("Index");

        }

}
}
                                                                                                          
时间: 2024-11-16 19:55:06

C#-折线图-从数据苦衷读取数据的相关文章

tp5.0行为的用法,可以存入json数据,方便读取数据。

1.首先新建个文件夹命名为behavior:2.在文件夹下面新建一个类,如Auth类:3 . 定义命名空间<?php namespace app\admin\behavior;//Config存入的是json配置数据,引入模型方便读取数据.use app\admin\model\Config;//引入这个就是为了方便可以使用提示方法 如:$this->success(); $this->success();use \traits\controller\Jump;class Auth{pu

python 数据可视化 -- 读取数据

从 CSV 文件中读取数据 import sys import csv # python 内置该模块 支持各种CSV文件 file_name = r"..\ch02_data\ch02-data.csv" # r 指明字符串不用转义 data = [] try: with open(file_name) as f: # 打开文件 reader = csv.reader(f) # 获取 reader 对象,通过对该对象的遍历获取文件的所有内容 header = next(reader)

echarts 折线图动态x轴及数据

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> &l

jxl的使用,从excel插入数据以及读取数据

最近写的一个小项目需要把txt文件里面的内容转化成excel,经过查寻资料发现现阶段Java操作Excel的JAR主要有apache 的POI及jxl.Jxl方便快捷,POI用于对复杂Excel的操作. 以下为写数据进入excel的代码 public static void addDataToExcel(String[] dataArr,String filepath) throws IOException, RowsExceededException, WriteException{ //构建

JavaScript数据可视化编程学习(一)Flotr2,包含简单的,柱状图,折线图,饼图,散点图

一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过程或者表示多个数据之间的差异. 1.引入javascrippt 使用flotr2这个JavaScript库来创建图表.使用flotr2之前,不需要引入其他的JavaScript库(比如jquery),但是flotr2必须依赖HTML5的canvas元素的支持.canvas支持的主流浏览器有:chro

Excel数据可视化应用(直方图、折线图、饼状图)

直方图:对比关系 直方图是一种统计报告图,是表示资料变化情况的主要工具.直方图由一系列高度不等的的纵向条纹或线段表示数据分布的情况.一般用横轴表示数据类型,纵轴表示分布情况. 例1: 1.右键单击图表的纵坐标轴数据,选择“设置坐标轴格式”命令打开窗格,在“坐标轴选项”下,各类数据设置如下: 2.右键单击图例,选择设置图例格式,选择靠上(或点击图表空白处,点击上方图表工具中的设计,选择下方左侧的“添加图表元素”,选择“图例”.“顶部”) 3.右键单击任一直条(单击一下会自动选择全部直条),选择“添

10天学会phpWeChat——第三天:从数据库读取数据到视图

在第二天,我们创建了我们的第一个phpWeChat功能模块,但是比较简单.实际生产环境中,我们不可能有如此简单的需求.更多的情况是数据存储在MySql数据库中,我们开发功能模块的作用就是将这些数据从MySql读取并通过视图多样化的呈现给用户. 今天我们进入<10天学会phpWeChat>系列教程的第三天:从数据库读取数据到视图. 一.首先,我们创建一个MySql数据文章表(pw_wechat_hello_article)用来存储要显示给用户的数据. 为了简单明了,这个表我们只保留3个字段: I

SharedPreferences存储和读取数据

除了SQLite数据库外,SharedPreferences也是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息.其存储位置在/data/data/<包名>/shared_prefs目录下.SharedPreferences对象本身只能获取数据而不支持存储和修改,存储修改是通过Editor对象实现.实现SharedPreferences存储的步骤如下: 一.根据Context获取SharedPreferences对象 二.利用ed

XML基础以及用DOM4j读取数据

都知道,HTML被设计用来显示数据,XML被设计用来保存.传输数据.而我们平时经常用的无非是保存数据.读取数据.所以这里主要介绍XML相关基础内容,以及用DOM4j来存取XML的数据. 下面简介XML相关的基础内容--命名空间.XSL.DTD与Schema 1>基本结构 ------------------------- ?  <>成对,区分大小写 ?  顶层元素只能有一个 ?  元素不能以xml开头,且不能有空格 2>命名空间 与我们编程语言中的命名空间类似,例如,如果想要建立两