我在MVC4应用程序中使用google的Guages，Bar和Pie图表， 我在PartialView中列出了所有这些，并且我从主索引页面调用局部视图。并且每30秒刷新一次局部视图。
30秒后，我在开发人员工具中获取数据，所有脚本和所有内容，但在页面上它已消失。
我的代码如下
部分视图
@{
Layout = "";
}
<script>
$(document).ready( function TargetCharts(){
var gauge;
var gaugeData;
var gaugeOptions;
google.load('visualization', '1', { packages: ['gauge'] });
function drawGauge() {
gaugeData = google.visualization.arrayToDataTable([
['Success'],
[5]
]);
gauge = new google.visualization.Gauge(document.getElementById('gaugeSuccess'));
gaugeOptions = {
min: 0,
max: 8,
greenFrom: 0,
greenTo: 5,
minorTicks: 10
};
gauge.draw(gaugeData, gaugeOptions);
}
google.setOnLoadCallback(drawGauge);
var gauge;
var gaugeData;
var gaugeOptions;
function drawGauge1() {
gaugeData = google.visualization.arrayToDataTable([
['Failed'],
[0]
]);
gauge = new google.visualization.Gauge(document.getElementById('gaugeFailed'));
gaugeOptions = {
min: 0,
max: 8,
redFrom: 0,
redTo: 0,
minorTicks: 10
};
gauge.draw(gaugeData, gaugeOptions);
}
google.setOnLoadCallback(drawGauge1);
var gauge;
var gaugeData;
var gaugeOptions;
function drawGauge2() {
gaugeData = google.visualization.arrayToDataTable([
['Running'],
[2]
]);
gauge = new google.visualization.Gauge(document.getElementById('gaugeRunning'));
gaugeOptions = {
min: 0,
max: 8,
greyFrom: 0,
greyTo: 2,
minorTicks: 10
};
gauge.draw(gaugeData, gaugeOptions);
}
google.setOnLoadCallback(drawGauge2);
var gauge;
var gaugeData;
var gaugeOptions;
function drawGauge3() {
gaugeData = google.visualization.arrayToDataTable([
['Yet To Run'],
[1]
]);
gauge = new google.visualization.Gauge(document.getElementById('gaugeYetToRun'));
gaugeOptions = {
min: 0,
max: 8,
yellowFrom: 0,
yellowTo: 1,
minorTicks: 10
};
gauge.draw(gaugeData, gaugeOptions);
}
google.setOnLoadCallback(drawGauge3);
google.load('visualization', '1');
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [['', 'Brightstar Review' , 'Customer Review' , 'Released From PFO' , 'Dropped To JDE' , 'InProcess To Drop To JDE' , 'NotDropped To JDE' , 'SalesOrder Created In JDE' , 'SalesOrder InProcess In JDE' , 'SalesOrder Failed In JDE' , 'SalesOrder Cancelled In JDE' , 'SalesOrder Dropped In RB' , 'SalesOrder Shipped In JDE' ],
['', 1, 0, 0,
0, 0,
0,0,
0, 0,
0,0,
0]],
options: {position: 'top', textStyle: {color: 'blue', fontSize: 16},width: 350,legend: 'none'
, tooltip: {isHtml: true,text: 'value' }},
containerId: 'visualization'
});
wrapper.draw();
}
google.setOnLoadCallback(drawVisualization);
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Orders Per Day'],
['Brightstar Review ' , 1 ],
['Customer Review', 0],
['Released From PFO' , 0],
['Dropped To JDE', 0],
['InProcess To Drop To JDE' , 0],
['NotDropped To JDE' , 0],
['SalesOrder Created In JDE', 0],
['SalesOrder InProcess In JDE', 0],
['SalesOrder Failed In JDE' , 0],
['SalesOrder Cancelled In JDE' , 0],
['SalesOrder Dropped In RB' , 0],
['SalesOrder Shipped In JDE' , 0]
]);
var options = {
//width: 600,
is3D: true,
width:350,
tooltip: {isHtml: true,text: 'value' },
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
var data = google.visualization.arrayToDataTable([
['Task', 'Orders Per Day'],
['Brightstar Review ' , 1 ],
['Customer Review', 0],
['Released From PFO' , 0],
['Dropped To JDE', 0],
['InProcess To Drop To JDE' , 0],
['NotDropped To JDE' , 0],
['SalesOrder Created In JDE', 0],
['SalesOrder InProcess In JDE', 0],
['SalesOrder Failed In JDE' , 0],
['SalesOrder Cancelled In JDE' , 0],
['SalesOrder Dropped In RB' , 0],
['SalesOrder Shipped In JDE' , 0]
]);
var options = {
//title: 'Cricket Orders',
//width: 600,
is3D: true,
width:350,
//backgroundColor: '#4C7B86',
tooltip: {isHtml: true,text: 'value' },
legend: 'none'
};
}
});
</script>
<div class="DashboardSlide">
<div class="HeaderContainer">
<div class="CompanyName">
Target
</div>
<div class="CompanyActivity">
Status: Wait
</div>
</div>
<div class="border">
<div class="chartContainer">
<div class="CompanyStatus">
<a href="/SCOJobMonitoring/Index" class="divLegendAction">Jobs</a>
</div>
<div class="CompanyTotalStatus">
Total No. of Jobs: 8
</div>
</div>
<div class="GaugeRow">
<div class="successChart">
<div id="gaugeSuccess" class=" gauge"></div>
</div>
<div class="failedChart">
<div id="gaugeFailed" class=" gauge"></div>
</div>
<div class="runningChart">
<div id="gaugeRunning" class=" gauge"></div>
</div>
<div class="yetToChart">
<div id="gaugeYetToRun" class="gauge"></div>
</div>
</div>
</div>
<div class="borderCharts">
<div class="HeaderContainerCharts">
<div class="CompanyOrderStatus">
<a href="/SCOOrderTracking/Index" class="divLegendAction"> Orders</a>
</div>
<div class="CompanyTotalOrderStatus">
Total No. of Orders : 1
</div>
</div>
<div class="ChartRow">
<div class="pieChartSection">
<div id="piechart" class="chart"></div>
</div>
<div class="barChartSection">
<div id="visualization" class="chart"></div>
</div>
<div class="legenContainerTarget">
<div class="legendRow">
<table>
<tr>
<td>
<div class="legend blue"></div> Brightstar Review
</td>
<td>1</td>
<td>
<div class="legend red"></div> Customer Review
</td>
<td>0</td>
</tr>
<tr>
<td>
<div class="legend yellow"></div> Released From PFO
</td>
<td>0</td>
<td>
<div class="legend green"></div> Dropped To JDE
</td>
<td>0</td>
</tr>
<tr>
<td>
<div class="legend purple"></div> InProcess To Drop To JDE
</td>
<td>0</td>
<td>
<div class="legend skyblue"></div> NotDropped To JDE
</td>
<td>0</td>
</tr>
<tr>
<td>
<div class="legend pink"></div> SalesOrder Created In JDE
</td>
<td>0</td>
<td>
<div class="legend parrotGreen"></div> SalesOrder InProcess In JDE
</td>
<td>0</td>
</tr>
<tr>
<td>
<div class="legend cheeryred"></div> SalesOrder Failed In JDE
</td>
<td>0</td>
<td>
<div class="legend Navyblue"></div> SalesOrder Cancelled In JDE
</td>
<td>0</td>
</tr>
<tr>
<td>
<div class="legend violet"></div> SalesOrder Dropped In RB
</td>
<td>0</td>
<td>
<div class="legend blueShaded"></div> SalesOrder Shipped In JDE
</td>
<td>0</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="HeaderContainer">
<div class="CompanyName">
Cut Off time is at December 19 2013 at
</div>
<div class="CompanyActivity">
Last Refershed at: 12/20/2013 11:30:00 AM
</div>
</div>
</div>
主索引页
<div class="slider" id="slider2">
<div class="DashboardSlide_parent">
@{ Html.RenderAction("TargetPartial");}
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
// $('.DashboardSlide_parent').html=''; $('.DashboardSlide_parent').load('/SCODashBoard/TargetPartial');
$.get("/SCODashBoard/TargetPartial", function (data) {
$(".DashboardSlide_parent").replaceWith(data);
});
}, 30000); // every 30 sec
});
</script>
任何人都可以帮我解决这个问题我真的很感谢你的帮助，非常感谢你
答案 0 :(得分：1)
我认为你只需要使用
$(".DashboardSlide_parent").html(data);
而不是
$(".DashboardSlide_parent").replaceWith(data);
这将取代DashboardSlide_parent div的内容，而不是替换div本身。