FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

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

搜索
查看: 4957|回复: 4
打印 上一主题 下一主题

求解highchart在FineUIMVC不能显示

[复制链接]
跳转到指定楼层
楼主
发表于 2017-3-2 15:17:39 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
我的系统框架使用的是FineUIMVC1.1基础版,在一个带有FindUIMVC控价的视图使用了highchart,但是highchart就是不显示,为什么呢?希望众位大师们给个提示帮助,这里先谢谢了,下面是视图代码

@{
    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="container" style="min-width:500px;height:400px"></div>
            </td>
        </tr>
    </table>


@section script {
    <script type="text/javascript">      
        $(function () {
            //alert("sssss")
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Column chart with negative values'
                },
                xAxis: {
                    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'John',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: 'Jane',
                    data: [2, -2, -3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, -2, 5]
                }]
            });
        });
    </script>
}

沙发
发表于 2017-3-2 15:47:16 | 只看该作者
目测,改为如下代码:
  1. @{
  2.     ViewBag.Title = "登记环节统计分析";
  3.     var F = @Html.F();
  4. }
  5. @section head{
  6.     <link type="text/css" rel="stylesheet" href="~/res/css/default.css" />
  7.    
  8. }

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

  11.         <tr style="height:30px;">
  12.             <td style="text-align:center;">
  13.                 <table style="width:80%;">
  14.                     <tr>
  15.                         <td style="width:160px;"> </td>
  16.                         <td style="width:150px;text-align:center;">
  17.                             @(
  18.                                 F.Label()
  19.                                  .ID("lb_DJHJ_Start")
  20.                                  .Width(130)
  21.                                  .Text("选择查询时间:")
  22.                             )
  23.                         </td>
  24.                         <td style="width:230px;text-align:left;">
  25.                             @(
  26.                                 F.DatePicker()
  27.                                  .ShowTime(false)                                 
  28.                                  .EmptyText("请选择查询日期")
  29.                                  .Width(180)
  30.                                  .ID("dp_DJHJ_Start")

  31.                             )
  32.                         </td>                        
  33.                         <td style="width:320px;text-align:center;">
  34.                             @(
  35.                                 F.DatePicker()
  36.                                  .ShowTime(false)
  37.                                  .Label("结束日期")
  38.                                  .EmptyText("请选择结束日期")
  39.                                  .Width(300)
  40.                                  .ID("dp_DJHJ_End")
  41.                                  .CompareControl("dp_DJHJ_Start")
  42.                                  .DateFormatString("yyyy-MM-dd")
  43.                                  .CompareOperator(Operator.GreaterThan)
  44.                                  .CompareMessage("结束日期应该大于开始日期")
  45.                                  .Hidden(true)
  46.                             )
  47.                         </td>
  48.                         <td style="width:150px;text-align:center;">                           
  49.                             @(
  50.                                 F.Button()
  51.                                     .ID("btn_DJHJ_Search1")
  52.                                     .Width(150)
  53.                                     .Text("统计分析")                                    
  54.                                     .OnClick(Url.Action("btn_DJHJ_Find_Click"), "dp_DJHJ_Start,dp_DJHJ_End,rdb_gDJHJ")
  55.                             )
  56.                         </td>
  57.                         <td style="text-align:left;width:150px;">

  58.                         </td>

  59.                     </tr>                     
  60.                 </table>
  61.             </td>
  62.         </tr>

  63.         <tr>
  64.             <td style="height:500px;width:800px;">
  65.                 <div id="container" style="min-width:500px;height:400px"></div>
  66.             </td>
  67.         </tr>
  68.     </table>


  69. @section script {
  70.          
  71.     <script src="~/Content/Highcharts-5.0.7/code/highcharts.js"></script>
  72.        
  73.     <script type="text/javascript">      
  74.         $(function () {
  75.             //alert("sssss")
  76.             $('#container').highcharts({
  77.                 chart: {
  78.                     type: 'column'
  79.                 },
  80.                 title: {
  81.                     text: 'Column chart with negative values'
  82.                 },
  83.                 xAxis: {
  84.                     categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  85.                 },
  86.                 credits: {
  87.                     enabled: false
  88.                 },
  89.                 series: [{
  90.                     name: 'John',
  91.                     data: [5, 3, 4, 7, 2]
  92.                 }, {
  93.                     name: 'Jane',
  94.                     data: [2, -2, -3, 2, 1]
  95.                 }, {
  96.                     name: 'Joe',
  97.                     data: [3, 4, 4, -2, 5]
  98.                 }]
  99.             });
  100.         });
  101.     </script>
  102. <img src="static/image/hrline/line1.png" border="0" alt="">

  103. }
复制代码


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



如果上面还不行,请基于空项目重现问题,并上传

板凳
 楼主| 发表于 2017-3-2 15:49:19 | 只看该作者

求解highchart在FineUIMVC不能显示 运行后的现象为本图所示

C:\Users\a\Pictures\11.png
地板
 楼主| 发表于 2017-3-2 15:53:20 | 只看该作者
谢谢三石先生的帮助!!!
5#
 楼主| 发表于 2017-3-2 16:05:14 | 只看该作者
三石先生,真是太厉害了,问题解决了,深表感谢!!!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-29 06:57 , Processed in 0.048200 second(s), 17 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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