シンプルな JSON テーブルと JS/JQ を使用してそのデータを表示するページを作成しました。1 つのシートにまとめてホストされているため、Chrome と FF の両方で正常に動作します。個別の HTML、CSS、JS、および JSON ファイルに分割されますが、Chrome にはわずかに可変性のバグがあります。
ページ: http://www.lafairclough.co.uk/JTest/index.html
ドロップダウンから 2 つのオプションを選択すると、右側のグラフに 2 台の車の相対的なパフォーマンス データが表示されます (上から順に、0-60、0-100、Standing Qtr、Top Speed)。これらは色分けされており、緑がより速い結果を示し、オレンジが特定の変数の引き分けを示します。
グラフは Java を使用して作成され、CSS div 幅を計算して設定します。ただし、Chrome では、この div 幅は (時々、しかししばしば) 予想よりもはるかに高い数値として計算されます。流れとして：
// Perf. BAR CHART SIZE CSS CAR A
$.getJSON("cars.json", function (data) {
$(document).ready(function () {
$('#dropdown1').change(function () {
var index = parseInt($(this).val()),
html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>";
$(".carA060").html(html);
var index = parseInt($(this).val());
var num = data.carList[index].zero60 * 10;
$(".carA060").css('width', num + '%').show();
html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>";
$(".carA0100").html(html);
var index = parseInt($(this).val());
var num = data.carList[index].zero100 * 5;
$(".carA0100").css('width', num + '%').show();
html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>";
$(".carAsQTR").html(html);
var index = parseInt($(this).val());
var num = data.carList[index].sQTR * 5;
$(".carAsQTR").css('width', num + '%').show();
html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>";
$(".carAvMAX").html(html);
var index = parseInt($(this).val());
var num = data.carList[index].vMAX * 0.5;
$(".carAvMAX").css('width', num + '%').show();
});
});
});
なぜChromeでうまくいかないのかについてのアイデアは非常に高く評価されます.
ありがとう、
リー。