FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 3775|回复: 2
打印 上一主题 下一主题

求助 关于如何将查询到的数据给在highchart上显示出来

[复制链接]
跳转到指定楼层
楼主
发表于 2017-3-3 16:21:35 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
现在使用三石先生的作品,在这里谢谢先生,你勤苦了!!由于是第一次,有些东东还不熟悉,出现了一些问题,比如昨天求助的hightchart显示的问题,今天的问题算是昨天问题的延续。现在的问题是:我在一个button事件中,怎样把从数据库中查询的相关数据给放到hightchart控件上显示出来。
下面是视图代码
@{
    ViewBag.Title = "登记环节统计分析";
    var F = @Html.F();
}
@section head{
    <link type="text/css" rel="stylesheet" href="~/res/css/default.css" />
    <script src="~/Scripts/jquery-2.2.3.js"></script>   
    <script src="~/Content/Highcharts-5.0.7/code/highcharts.js"></script>
}

@section body {
    <table style="width:100%;border-width:1px;height:100%;">

        <tr style="height:30px;">
            <td style="text-align:center;">
                <table style="width:80%;">
                    <tr>
                        <td style="width:160px;">&nbsp;</td>
                        <td style="width:150px;text-align:center;">
                            @(
                                F.Label()
                                 .ID("lb_DJHJ_Start")
                                 .Width(130)
                                 .Text("选择查询时间:")
                            )
                        </td>
                        <td style="width:230px;text-align:left;">&nbsp;
                            @(
                                F.DatePicker()
                                 .ShowTime(false)                                 
                                 .EmptyText("请选择查询日期")
                                 .Width(180)
                                 .ID("dp_DJHJ_Start")

                            )
                        </td>                        
                        <td style="width:320px;text-align:center;">
                            @(
                                F.DatePicker()
                                 .ShowTime(false)
                                 .Label("结束日期")
                                 .EmptyText("请选择结束日期")
                                 .Width(300)
                                 .ID("dp_DJHJ_End")
                                 .CompareControl("dp_DJHJ_Start")
                                 .DateFormatString("yyyy-MM-dd")
                                 .CompareOperator(Operator.GreaterThan)
                                 .CompareMessage("结束日期应该大于开始日期")
                                 .Hidden(true)
                            )
                        </td>
                        <td style="width:150px;text-align:center;">                           
                            @(
                                F.Button()
                                    .ID("btn_DJHJ_Search1")
                                    .Width(150)
                                    .Text("统计分析")                                    
                                    .OnClick(Url.Action("btn_DJHJ_Find_Click"), "dp_DJHJ_Start,dp_DJHJ_End,rdb_gDJHJ")
                            )
                        </td>
                        <td style="text-align:left;width:150px;">

                        </td>

                    </tr>                     
                </table>
            </td>
        </tr>

        <tr>
            <td style="height:500px;width:800px;">
                <div id="chartBDC_Node" style="min-width:500px;height:550px"></div>
            </td>
        </tr>
    </table>
@section script {
    <script src="~/Content/Highcharts-5.0.7/code/highcharts.js"></script>
    <script src="~/Scripts/Main.js"></script>
    <script type="text/javascript">
        $(function () {//这部分的写的可能不正确
            $.post("@Url.Action("vDJHJChart")", { "dp_DJHJ_Start": F.ui.dp_DJHJ_Start, "dp_DJHJ_End": F.ui.dp_DJHJ_End, "rdb_gDJHJ": F.ui.rdb_gDJHJ }, function (data) {
                alert(data);
                SetTotalAnalyChart("chartBDC_Node", "不动产登记各环节汇总统计分析图", "办件数量(个)", eval('(' + data + ')'));//SetTotalAnalyChart 是放在main.js中显示chart图
            });

}

下面是main.js中的代码  
function SetTotalAnalyChart(contal, title, yAxisVal, val) {
    Highcharts.chart(contal, {
        chart: {
            type: 'column'
        },
        title: {
            text: title
        },
        xAxis: {
            categories: 'category'            
        },
        yAxis: {
            min: 0,
            title: {
                text: yAxisVal
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{y}'
                }
            }
        },
        credits: {
            enabled: false
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br />'
        },
        series: [{
            name: '分析结果',
            colorByPoint: true,
            data: val
        }]
    });
}


下面是controller代码
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult btn_DJHJ_Find_Click(string dp_DJHJ_Start, string dp_DJHJ_End,string rdb_gDJHJ)        
{

    DateTime dS = DateTime.Now, dE = DateTime.Now;
   string ss = op.GetTotalAnalyNodeResult(dS, dE);
  //ss值为[{name: '发证',y: 5},{name: '制证',y: 9},{name: '制档',y: 10},{name: '登簿',y: 29},{name: '复审',y: 66},{name: '初审',y: 105}]
  //是将 ss 中的内容给显示出来,也就是怎样将此事件的数传到前台客户端
   return Json(ss); //UIHelper.Result();这里能是出问题的地方,不知道这写行?
}
沙发
发表于 2017-3-3 21:02:24 | 只看该作者
我上次给你说的:
注意两点:
1. 删除 jQuery 引用,因为 FineUIMvc 已经内置了 jQuery 引用
2. 所有脚本放到 @section script 节里面

你这里还没改阿。

后台向前台注册脚本,这个和FineUI(开源版)中是一样的,比如这个示例:http://fineui.com/demo_mvc/#/demo_mvc/Window/Toolbar

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
板凳
 楼主| 发表于 2017-3-8 16:46:27 | 只看该作者
果然按照三石先生所说,问题解决
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-11-25 12:57 , Processed in 0.049178 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表