FineUI 官方论坛

标题: 求助关于如何将查询到的数据给在highchart上显示出来 [打印本页]

作者: 努力奋斗 时间: 2017-3-3 16:21
标题: 求助关于如何将查询到的数据给在highchart上显示出来
现在使用三石先生的作品，在这里谢谢先生，你勤苦了！！由于是第一次，有些东东还不熟悉，出现了一些问题，比如昨天求助的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;"> </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;"> 
                        @(
                              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();这里能是出问题的地方，不知道这写行？
}

作者: sanshi 时间: 2017-3-3 21:02
我上次给你说的：

注意两点：
1. 删除 jQuery 引用，因为 FineUIMvc 已经内置了 jQuery 引用
2. 所有脚本放到 @section script 节里面

你这里还没改阿。

后台向前台注册脚本，这个和FineUI（开源版）中是一样的，比如这个示例：http://fineui.com/demo_mvc/#/demo_mvc/Window/Toolbar[attach]9853[/attach]

作者: 努力奋斗 时间: 2017-3-8 16:46
果然按照三石先生所说，问题解决

欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)