我目前正在开发一个使用 Highcharts 来显示一些数据的网站。我一直在测试不同的选项，从服务器检索数据等，一切都很完美，但仅限于 chrome。
在 Firefox 上测试它时，我可以看到图表应该在哪里。我可以看到边框、标题、打印/导出按钮（所有这些都是由插件本身生成的），但看不到数据。我使用 firebug 检查它是否从服务器正确检索数据，一切似乎都很好。
在 IE6 上变得更糟，因为我什至看不到边框、标题等。
我在某处读到 Highcharts 在折线图和 jquery 1.7 方面存在问题，但我尝试使用不同类型的图表并将 jquery 版本更改为 1.8。它始终适用于 chrome，但不适用于 firefox/IE6
我没有粘贴任何代码，因为老实说我不知道问题出在哪里，我希望我只是一个我可以轻松解决的错误..提前致谢
编辑：
我检查了 jsFiddle 但我不知道如何在没有服务器端的情况下让它工作而不改变一些东西。这是一些代码。希望对您有所帮助：
HTML
<html class="gecko win" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>Portal de Conciliacion SMS Prepago</title>
<script type="text/javascript" src="Plantilla/script.js"></script>
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script src="Highcharts/js/highcharts.js"></script>
<script src="Highcharts/js/modules/exporting.js"></script>
<style type="text/css" title="currentStyle">@import "DataTables/media/css/demo_table.css";</style>
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="Plantilla/style.css" type="text/css" media="screen">
<!--[if IE 6]><link rel="stylesheet" href="Plantilla/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="Plantilla/style.ie7.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div style="overflow: hidden">
<div id="diferencia" style="width: 48%; height: 200px; margin: 0 auto"></div>
<br>
<br>
<div id="ttdm" style="float: left; width: 48%; height: 200px; margin: 0 auto"></div>
<div id="rtbs" style="float: right; width: 48%; height: 200px; margin: 0 auto"></div>
</div>
</body>
</html>
（我还使用数据表插件来显示页面中的数据。我留下了那部分代码，但保留了包含以防它可能需要做的事情）
JS
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
$(function () {
var fecha = getUrlVars()["fecha"];
if (fecha) {
console.log(fecha);
}
else {
fecha = "";
console.log("NO!!!");
}
var chart_diferencia;
var chart_ttdm;
var chart_rtbs;
$(document).ready(function() {
var options_diff = {
chart: {
renderTo: 'diferencia',
borderColor: '#000000',
borderWidth: 2,
margin: [30, 30, 30, 30],
type: 'area'
},
title: {
text: 'Diferencia (TTDM vs RTBS)'
},
xAxis: {
type: 'datetime',
tickInterval: 3 * 24 * 3600 * 1000,
tickWidth: 5,
gridLineWidth: 1,
labels: {
align: 'center',
formatter: function() {
return Highcharts.dateFormat('%e/%m', this.value);
}
}
},
yAxis: [{
title: {
text: null
},
labels: {
align: 'center',
x: -12,
formatter: function() {
return Highcharts.numberFormat(this.value/1000, 0) + 'K';
}
},
showFirstLabel: false,
}],
legend: {
enabled: false,
},
tooltip: {
shared: true,
crosshairs: true,
},
series: [{
name: 'Diferencia',
color: '#FF8C00',
lineWidth: 2,
marker: {
radius: 3
}
}]
};
var options_ttdm = {
chart: {
renderTo: 'ttdm',
borderColor: '#000000',
borderWidth: 2,
margin: [30, 30, 30, 30],
type: 'area'
},
title: {
text: 'TTDM (cursado)'
},
xAxis: {
type: 'datetime',
tickInterval: 3 * 24 * 3600 * 1000,
tickWidth: 5,
gridLineWidth: 1,
labels: {
align: 'center',
formatter: function() {
return Highcharts.dateFormat('%e/%m', this.value);
}
}
},
yAxis: [{
title: {
text: null
},
labels: {
align: 'center',
x: -12,
formatter: function() {
return Highcharts.numberFormat(this.value/1000000, 0) + 'M';
}
},
showFirstLabel: false,
}],
legend: {
enabled: false,
},
tooltip: {
shared: true,
crosshairs: true,
},
series: [{
name: 'TTDM',
lineWidth: 2,
marker: {
radius: 3
}
}]
};
var options_rtbs = {
chart: {
renderTo: 'rtbs',
borderColor: '#000000',
borderWidth: 2,
margin: [30, 30, 30, 30],
type: 'area'
},
title: {
text: 'RTBS (facturado)'
},
xAxis: {
type: 'datetime',
tickInterval: 3 * 24 * 3600 * 1000,
tickWidth: 5,
gridLineWidth: 1,
labels: {
align: 'center',
formatter: function() {
return Highcharts.dateFormat('%e/%m', this.value);
}
}
},
yAxis: [{
title: {
text: null
},
labels: {
align: 'center',
x: -12,
formatter: function() {
return Highcharts.numberFormat(this.value/1000000, 0) + 'M';
}
},
showFirstLabel: false,
}],
legend: {
enabled: false,
},
tooltip: {
shared: true,
crosshairs: true,
},
series: [{
name: 'RTBS',
color: '#8B0000',
lineWidth: 2,
marker: {
radius: 3
}
}]
};
// Load data asynchronously using jQuery. On success, add the data
// to the options and initiate the chart.
// This data is obtained by exporting a GA custom report to TSV.
// http://api.jquery.com/jQuery.get/
jQuery.get('Solicitudes/concil_TTDMvsRTBS.php', null, function(tsv, state, xhr) {
var lines = [],
listen = false,
date,
// set up the two data series
diferencia = [],
ttdm = [],
rtbs = [];
// inconsistency
if (typeof tsv !== 'string') {
tsv = xhr.responseText;
}
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
listen = true;
//console.log(line);
// all data lines start with a double quote
if (line != "") {
line = line.split(',');
//console.log(line);
date = Date.parse(line[0] +' UTC');
diferencia.push([
date,
parseInt(line[1].replace(',', ''), 10)
]);
ttdm.push([
date,
parseInt(line[2].replace(',', ''), 10)
]);
rtbs.push([
date,
parseInt(line[3].replace(',', ''), 10)
]);
}
});
//console.log(allVisits);
diferencia.reverse();
ttdm.reverse();
rtbs.reverse();
options_diff.series[0].data = diferencia;
options_ttdm.series[0].data = ttdm;
options_rtbs.series[0].data = rtbs;
//options.series[1].data = newVisitors;
//console.log(allVisits);
//console.log(newVisitors);
Highcharts.setOptions({
lang: {
weekdays: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado']
}
});
Highcharts.setOptions({
lang: {
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
}
});
chart_diferencia = new Highcharts.Chart(options_diff);
chart_ttdm = new Highcharts.Chart(options_ttdm);
chart_rtbs = new Highcharts.Chart(options_rtbs);
console.log("LISTO!");
});
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bAutoWidth": true
});
});
});
这有点长，因为我为三个不同的图形设置了选项。获取部分有点混乱，因为我是通过修改插件附带的示例到达那里的，但是我已经检查了两个调试控制台（firebug 和 chrome），并且数据在两者上接收到的数据完全相同。
我在 highcharts 支持论坛上读到，图表选项中的逗号可能是它在 IE6 上不起作用的原因，明天在工作中检查。但正如我之前提到的，在 Firefox 上我可以看到背景、标题、打印/导出按钮，但没有任何数据..
highchart 版本是 2.2.5。我下载了2.3，但还没有尝试过。明天早上第一件事。
谢谢你的帮助！