現在、ハイチャートを使用してデータを表示する Web サイトに取り組んでいます。サーバーからデータを取得するなど、さまざまなオプションをテストしてきましたが、すべてが完璧に機能しますが、クロムのみです。
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>
(また、ページにデータを表示するために datatables プラグインを使用しています。コードのその部分は省略しましたが、何かする必要がある場合に備えてインクルードは残しました)
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
});
});
});
3 つの異なるグラフィックスのオプションを設定したので、ちょっと長くなりました。プラグインに付属のサンプルを変更して取得したため、get 部分は少し面倒ですが、両方のデバッグ コンソール (firebug と chrome) で確認したところ、データは両方でまったく同じように受信されました。
ハイチャートのサポート フォーラムで、チャート オプションのカンマが IE6 で動作しない理由である可能性があることを読みました。明日、職場で確認する必要があります。しかし、先に述べたように、Firefox では背景、タイトル、印刷/エクスポート ボタンは表示されますが、データは表示されません。
ハイチャートのバージョンは 2.2.5 です。2.3 をダウンロードしましたが、まだ試していません。まずは明日の朝。
助けてくれてありがとう！