CSS と 2 つの単純なハイチャート (highcharts.com) を含む HTML ページを作成しました。
これを自分のコンピューターでローカルにテストしましたが、結果に非常に満足しています。これを内部ネットワークのサーバーに移動して、誰でも利用できるようにしました。
ページがサーバーから読み込まれると、次の 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 つのグラフに対してほぼ同じコードを作成したことが多々あるように見えることはわかっていますが、プロジェクトを進めるとすぐに、これらは大きく異なるものになるでしょう。