FineUI 官方论坛
标题:
求解highchart在FineUIMVC不能显示
[打印本页]
作者:
努力奋斗
时间:
2017-3-2 15:17
标题:
求解highchart在FineUIMVC不能显示
我的系统框架使用的是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;"> </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="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>
}
作者:
sanshi
时间:
2017-3-2 15:47
目测,改为如下代码:
@{
ViewBag.Title = "登记环节统计分析";
var F = @Html.F();
}
@section head{
<link type="text/css" rel="stylesheet" href="~/res/css/default.css" />
}
@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="container" style="min-width:500px;height:400px"></div>
</td>
</tr>
</table>
@section script {
<script src="~/Content/Highcharts-5.0.7/code/highcharts.js"></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>
<img src="static/image/hrline/line1.png" border="0" alt="">
}
复制代码
注意两点:
1. 删除 jQuery 引用,因为 FineUIMvc 已经内置了 jQuery 引用
2. 所有脚本放到
@section script
节
里面
如果上面还不行,请基于空项目重现问题,并上传
作者:
努力奋斗
时间:
2017-3-2 15:49
标题:
求解highchart在FineUIMVC不能显示 运行后的现象为本图所示
C:\Users\a\Pictures\11.png
作者:
努力奋斗
时间:
2017-3-2 15:53
谢谢三石先生的帮助!!!
作者:
努力奋斗
时间:
2017-3-2 16:05
三石先生,真是太厉害了,问题解决了,深表感谢!!!
欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/)
Powered by Discuz! X3.4