我制作了一个 HTML 页面，其中包含一些 CSS 以及 2 个简单的 highcharts (highcharts.com)
我已经在我自己的计算机上进行了本地测试，并且对结果非常满意，我将它移到了我们内部网络上的服务器上，以便所有人都可以使用它。
从服务器加载页面时，一切都显示为“错误”，如下图 2 所示。
（我似乎不允许发布图片）
http://i46.tinypic.com/jaua7o.png
这是正确的布局。
http://i46.tinypic.com/1zo9dzo.png
这是不正确的布局。正如您在不正确的布局上可能看到的那样，出于某种原因，菜单中的字母更小，并且图表左侧的“千兆字节”正遭受一些奇怪的奇怪东西。除此之外，当图表加载到我的本地计算机上时，它们有一些流畅的动画，从外部服务器加载时不会显示。
尽管这些字母比我的本地计算机上的要小，但很明显，某些格式可以按预期工作，因为菜单“有点”工作，这是用 CSS 制作的。
关于什么可能导致这种情况的任何提示？我有点困惑，因为我认为无论是从本地机器还是从服务器加载 HTML 都是一样的。
提前致谢。
特定页面的代码（抱歉我没有评论它）：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
var kunde = getQueryVariable("area");
function onDownload() {
document.location = 'database' + kunde + '.csv';
}
$(document).ready(function () {
var graph = {
colors: [
'#696567',
'#525051'
],
exporting: { enabled: false },
chart: {
renderTo: 'container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Imaginært Diskforbrug'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Gigabyte'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
};
$.get("mfdisk" + kunde + ".txt", function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) graph.xAxis.categories.push(item);
})
;
}
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
graph.series.push(series);
}
});
var chart = new Highcharts.Chart(graph);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var tapegraph = {
colors: [
'#525051'
],
exporting: { enabled: false },
chart: {
renderTo: 'tapecontainer',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Imaginært Tapeforbrug'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Gigabyte'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
};
$.get("mftape" + kunde + ".txt", function (data) {
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo == 0) {
$.each(items, function (itemNo, item) {
if (itemNo > 0) tapegraph.xAxis.categories.push(item);
})
;
}
else {
var series = {
data: []
};
$.each(items, function (itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
tapegraph.series.push(series);
}
});
var chart = new Highcharts.Chart(tapegraph);
});
});
</script>
</head>
<body>
<ul class="tabmenu">
<li><a href="csv.html">Forside</a></li>
<li class="active"><a href="mfstart.html">Mainframe</a></li>
<li><a href="">AIX</a></li>
<li><a href="">Superdome</a></li>
<li><a href="">TEST</a></li>
</ul>
<div class="menu">
<a href="mf.html?area=AC">KMA</a>
<a href="mf.html?area=fAC">FrysAC</a>
<a href="mf.html?area=OC">KMO</a>
<a href="mf.html?area=fOC">FrysOC</a>
<a href="mf.html?area=BC">KMB</a>
<a href="mf.html?area=SAP">SAP</a>
<a href="mf.html?area=Eboks">Eboks</a>
<a href="mf.html?area=fBC">FrysBC</a>
<a href="mf.html?area=uAZ">Udv - AZ</a>
<a href="mf.html?area=uOZ">Udv - OZ</a>
<a href="mf.html?area=uBZ">Udv - BZ</a>
<a href="mf.html?area=TCS">TCS</a>
<a href="mf.html?area=COOP">COOP</a>
<a href="mf.html?area=U1">KMD Udv1</a>
<a href="mf.html?area=U2">KMD Udv2</a>
<a href="mf.html?area=Nem">Nemkonto</a>
<a href="mf.html?area=Systest">Systest</a>
<a href="mf.html?area=AKI">ÅKI</a>
<a href="mf.html?area=Ribe">Ribe</a>
<a href="mf.html?area=Eindkomst">E-indkomst</a>
<a href="mf.html?area=Fyn">Fyns Amt</a>
<a href="mf.html?area=KK">KK</a>
<a href="mf.html?area=KC">KC</a>
<a href="mf.html?area=FDC">FDC</a>
<a href="mf.html?area=ATP">ATP</a>
</div>
<div id="container" style="width: 720px; height: 360px; margin: 0 auto"></div>
<div id="tapecontainer" style="width: 720px; height: 360px; margin: 0 auto"></div>
<div class="downloadlink">
<a href="javascript:onDownload();">Klik her for at downloade database over kundens forbrug</a>
</div>
</body>
我知道我为 2 个图表编写了几乎相同的代码可能看起来很丰富，但是一旦我在项目中走得更远，这些代码就会大不相同。