csv中的高位图表未在刷新页面上绘制图表
我已经创建了一个csv中的高位图表未在刷新页面上绘制图表,csv,highcharts,refresh,Csv,Highcharts,Refresh,我已经创建了一个highchart并从csv文件中获取了数据。该图表运行良好,打印良好。但我的问题是,当页面刷新时,它没有从csv文件中获取最新值。它仍然显示旧图表。当我关闭浏览器并重新打开图表时,该图表工作正常。请帮助我如何重置/重新绘制下面的csv更新值是我的代码。这个问题发生在IE中,而不是firefox中。如果右键单击显示的图表并导出到excel,则其将显示更新的值,但不会绘制具有更新值的图表 <html> <head> <meta http
highchart
并从csv文件中获取了数据。该图表运行良好,打印良好。但我的问题是,当页面刷新时,它没有从csv文件中获取最新值。它仍然显示旧图表。当我关闭浏览器并重新打开图表时,该图表工作正常。请帮助我如何重置/重新绘制下面的csv更新值是我的代码。这个问题发生在IE中,而不是firefox中。如果右键单击显示的图表并导出到excel,则其将显示更新的值,但不会绘制具有更新值的图表
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<LINK REL="StyleSheet" HREF="../style/default.css" TYPE="text/css"
MEDIA="screen">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
cache:false
var options="";
options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Incident Status'
},
xAxis: {
categories: []
},
yAxis:
{
allowDecimals:false, tickInterval:15,
title: {
text: 'Issue Count'
}
},
series: []
};
/*
Load the data from the CSV file. This is the contents of the file:
Apples,Pears,Oranges,Bananas,Plums
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
*/ $.get('../data/incident_status.txt', function(data) {
// Split the lines
var lines = data.split(';');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series;
series= {
data: [],
pointWidth: 28
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
chart = new Highcharts.Chart(options);
chart.destroy();
chart = new Highcharts.Chart(options);
});
}); </script>
<body>
<div id="wrapper">
<div class="container">
<div id="banner" >
<div class="img-border"> <img src="../images/logo.jpg" width="1120" height="111px" alt="" /> </div>
</div>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
<?php include('../control/incidentstatus_gen.php');?>
</div>
</div>
<body> </html>
var图;
$(文档).ready(函数(){
缓存:false
var期权=”;
选项={
图表:{
renderTo:'容器',
defaultSeriesType:“列”
},
标题:{
文本:“事件状态”
},
xAxis:{
类别:[]
},
亚克斯:
{
allowDecimals:false,tickInterval:15,
标题:{
文本:“问题计数”
}
},
系列:[]
};
/*
从CSV文件加载数据。这是文件的内容:
苹果、梨、桔子、香蕉、李子
约翰,8,4,6,5岁
简,3,4,2,3
乔,86,76,79,77
珍妮特,3,16,13,15岁
*/$.get('../data/incident_status.txt',函数(数据){
//分道扬镳
变量行=data.split(“;”);
$.each(行,函数)(行号,行){
var items=line.split(',');
//标题行包含类别
如果(行号==0){
$。每个(项目,功能(项目编号,项目){
if(itemNo>0)options.xAxis.categories.push(项目);
});
}
//其余行包含名称位于第一个位置的数据
否则{
var系列;
系列={
数据:[],
点宽度:28
};
$。每个(项目,功能(项目编号,项目){
如果(itemNo==0){
series.name=项目;
}否则{
数据推送(parseFloat(item));
}
});
选项。系列。推送(系列);
}
});
图表=新的高点图表。图表(选项);
chart.destroy();
图表=新的高点图表。图表(选项);
});
});
看起来,$.gt正在从浏览器缓存中获取文件。解决这个问题的方法是,通过添加一个变量参数,使请求唯一。Jquery可以帮助您
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
或者,您也可以通过添加一个日期-时间参数使请求具有唯一性来完成此操作
$.get(filename,{ "_": $.now() }, function(data){
...
});
您是否正在从
$获取刷新时的新数据。获取
?否如果我按f5,则不会刷新。如果我关闭浏览器并重新打开它,则会正常工作。这个问题只发生在IE中。非常感谢各位。问题解决了。这是一个浏览器设置问题。每次页面刷新时,我都会将设置更改为加载缓存。现在它的工作方式对您的浏览器来说很好,但是对于其他没有正确浏览器设置的人来说,它不起作用。是的,你是对的。我的只是向用户显示,所以没有问题。但若它是在网络上托管的,那个么这是一个问题。Highcharts必须修复它。这不是Highcharts的问题。这与使用jquery进行ajax调用有关,并确保它强制浏览器不使用缓存数据。您应该使用$.ajax()而不是$.get(),并设置cache:false。