我的客户端有IE8，我需要在其上代表一些图表...在Chrome上显示图表（我正在使用高清插件）
......但是在IE 8上，这个garph是不可见的......
这是我的js包含高图插件
function DrawGphs(container,title,seriesret) {
//if(area = "Audio")
containerzxi = container;
//title = gphobject.title;
highOptions1 = {
chart: {
renderTo: containerzxi
type: 'pie'
},
title: {
text: title
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
pie: {
shadow: false
dataLabels: {
enabled: true,
distance: 16
color: '#000000'
connectorColor: '#000000'
formatter: function () {
var val = this.y;
if (val == 0) {
return '';
}
return Math.round(this.percentage) + '%';
//return val + ' (' + roundDec(this.percentage) + '%)';
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>:' + this.y;
}
},
series: [{ name: 'Repairs',
data: [],
size: '100%',
innerSize: '60%',
showInLegend: true
}]
};
highOptions1.series[0].data = seriesret;
chart = new Highcharts.Chart(highOptions1);
}
function getRepairData(selected) {
var object1 = new Object();
object1.area = selected;
$.ajax({
type: "POST",
url: "IndiaOCR.aspx/GetRepairList",
data: JSON.stringify(object1),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var cabs = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
//var container = "container4";
if (object1.area == "Audio") {
container = "container4";
}
if (object1.area == "Stability") {
container = "powtopdiv";
}
if (object1.area == "Touch") {
container = "touchrepdiv";
}
if (object1.area == "Battery") {
container = "batttopdiv";
}
var title = "No. of Repairs";
//DrawGphs(container, cabs);
var seriesx = [];
for (i = 0; i < cabs.length; i++) {
seriesx.push([cabs[i].TechnicalSymCodeDesc, parseInt(cabs[i].KeyRepairs)]);
}
DrawGphs(container, title, seriesx);
}
});
}
function getSymptomData(selected) {
var object1 = new Object();
object1.area = selected;
$.ajax({
type: "POST",
url: "IndiaOCR.aspx/GetSymptomList",
data: JSON.stringify(object1),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var cabs = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
//var container = "containerxd";
if (object1.area == "Audio") {
container = "containerxd";
}
if (object1.area == "3rd Party Applications") {
container = "appsymdiv";
}
if (object1.area == "Stability") {
container = "powsymdiv";
}
if (object1.area == "Touch") {
container = "touchocdiv";
}
if (object1.area == "Battery") {
container = "battcmdiv";
}
//DrawGphs(container, cabs);
var seriesx = [];
var title = selected + " Symptom";
for (i = 0; i < cabs.length; i++) {
seriesx.push([cabs[i].Symptom, parseInt(cabs[i].Issues)]);
}
DrawGphs(container, title, seriesx);
}
});
}
function getCategoryData(area) {
var obj2 = new Object();
obj2.area = area;
$.ajax({
type: "POST",
url: "IndiaOCR.aspx/GetCategorisedList",
data: JSON.stringify(obj2),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
taged = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
// }
unibiz2 = GetUniqueProductCat();
for (d = 0; d < unibiz2.length; d++) {
var title = area + " " + "(" + unibiz2[d] + ")";
if (area == "Audio") {
//for (z = 0; z < trucks.length; z++) {
if (unibiz2[d] == "First Products") {
container = "audiocon";
}
if (unibiz2[d] == "Feature Products") {
container = "categoryaudi";
}
if (unibiz2[d] == "Smart Products") {
container = "categorysmrt";
}
}
if (area == "3rd Party Applications") {
if (unibiz2[d] == "Feature Products") {
container = "appcatdiv";
}
if (unibiz2[d] == "Smart Products") {
container = "appsmrtdiv";
}
}
if (area == "Stability") {
if (unibiz2[d] == "First Products") {
container = "powissdiv";
}
if (unibiz2[d] == "Feature Products") {
container = "powcatdiv";
}
if (unibiz2[d] == "Smart Products") {
container = "powsmrtdiv";
}
}
if (area == "Touch") {
if (unibiz2[d] == "Smart Products") {
container = "touchcatdiv";
}
}
if (area == "Battery") {
if (unibiz2[d] == "First Products") {
container = "battcintdiv";
}
if (unibiz2[d] == "Feature Products") {
container = "battcatdiv";
}
if (unibiz2[d] == "Smart Products") {
container = "battsmtdiv";
}
}
var newLP = [];
for (z = 0; z < taged.length; z++) {
if (unibiz2[d] == taged[z].ProductCategory) {
newLP.push([taged[z].Symptom, parseInt(taged[z].IssuesReported)]);
}
}
DrawGphs(container, title, newLP);
}
}
});
}
function getComponentData(selected) {
var objectx = new Object();
objectx.area = selected;
$.ajax({
type: "POST",
url: "IndiaOCR.aspx/GetCompoList",
data: JSON.stringify(objectx),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
tucks = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
unibix = GetUniqueComponentSym();
for (t = 0; t < unibix.length; t++) {
title = selected + "(" + unibix[t] + ")";
if (objectx.area == "Audio") {
if (unibix[t] == "Calls") {
container = "container6";
}
if (unibix[t] == "Music") {
container = "contcompsym";
}
}
if (objectx.area == "Stability") {
if (unibix[t] == "All") {
container = "powappdiv";
}
if (unibix[t] == "Communication") {
container = "powcompdiv";
}
if (unibix[t] == "Internet") {
container = "powcomdiv2";
}
if (unibix[t] == "Multimedia") {
container = "powcomdiv3";
}
if (unibix[t] == "Phone Application") {
container = "powcomdiv4";
}
if (unibix[t] == "Third Party") {
container = "powcomdiv5";
}
}
var newLP = [];
for (s = 0; s < tucks.length; s++) {
if (unibix[t] == tucks[s].Component) {
newLP.push([tucks[s].IssuesDesc, parseInt(tucks[s].ConsumerReporting)]);
}
}
DrawGphs(container, title, newLP);
}
}
});
}
$(document).ready(function () {
$('#wrapper').width($(window).width() * 0.7);
$('.main-menu-span').width($(window).width() * 0.2);
$('#gmenu').tabs({
//selected = $('#maindiv').text();
activate: (function (event, ui) {
var active = $("#gmenu").tabs("option", "active");
selected = ($("#gmenu ul>li a").eq(active).text());
//alert(selected);
getRepairData(selected);
getSymptomData(selected);
//GetProductData(selected);
//GetData(selected);
// getGPHComment(selected);
// $('#Button1').click(function () {
// $(this).removeClass('editbut');
// $(this).addClass('savebut');
//
// });
getCategoryData(selected);
getComponentData(selected);
getGPHComment(selected);
if (selected == 'Audio') {
GetDecibelData();
}
})
});
mainOCRTrend();
mainCIdata();
GetCIMPproducts();
$('.editbut').click(function () {
// $(".ui-button-icon-primary", this).toggleClass("ui-icon-disk ui-icon-pencil");
// $(this).prev("textarea").attr('id').disabled(); ;
// return false;
// }, function () {
$(".ui-button-icon-primary", this).toggleClass("ui-icon-pencil ui-icon-disk");
if ($(".ui-button-icon-primary").hasClass("ui-icon-disk")) {
//var oldcmtn = $(this).prev("textarea").val();
// $('#oldcomment').val(oldcmtn);
$(this).prev("textarea").focus();
if ($(this).prev('textarea').val().length != 0) {
com = $(this).prev('textarea').attr('id');
oldcmnt = $('#' + com).val();
//$('#oldcomment').val(oldcmnt);
//var oldCmt = odcmnt.html();
//input
}
}
if ($(".ui-button-icon-primary", this).hasClass("ui-icon-pencil")) {
//var tstext = com.value();
com = $(this).prev('textarea').attr('id');
if ($('#' + com).val().length == 0) {
var comon = $('#' + com).val(oldcmnt);
saveTxt(com, comon);
}
else {
var conon = $('#' + com).val();
saveTxt(com, conon);
}
//alert($(this).prev("textarea").attr('id'));
//saveTxt(com);
}
return false;
});
var oldcmnt = "";
var com = "";
selected = "Main"
//var dtab = new Object();
//dtab.area = selected;
getGPHComment(selected);
});
//Main Tab
var cabs = new Object();
function mainOcr() {
var highOptions = {
chart: {
renderTo: 'container'
},
title: {
text: 'Top OCR'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'India Claim Rate'
},
min: 0
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value) + '%';
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '%' + '<br/>';
}
},
legend: {
layout: 'horizontal'
align: 'bottom'
verticalAlign: 'bottom'
borderWidth: 0
},
series: []
};
unibikis = GetUniqueArea();
highOptions.xAxis.categories = GetUniqueYearPer();
chart = new Highcharts.Chart(highOptions);
for (var d = 0; d < unibikis.length; d++) {
newLP = [];
var aName = unibikis[d];
for (j = 0; j < cabs.length; j++) {
if (unibikis[d] == cabs[j].Area) {
newLP.push([cabs[j].Area, parseFloat(cabs[j].ClaimRate)]);
}
}
chart.addSeries({
name: aName,
data: newLP
}, false);
chart.redraw();
}
}
function mainOCRTrend() {
$.ajax({
url: 'IndiaOCRImprovement.aspx/mainOCR',
type: 'POST',
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
cabs = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
mainOcr();
},
error: function () { alert('Server Error!!!'); }
});
}
var trucks = new Object();
function mainCIdata() {
$.ajax({
url: 'IndiaOCRImprovement.aspx/mainPageConsumer',
type: 'POST',
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
trucks = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
mainCIGraph();
mainCIPGraph();
},
error: function () { alert('Server Error!!!'); }
});
}
function mainCIGraph() {
highOptions1 = {
chart: {
renderTo: 'container1'
type: 'pie'
},
title: {
text: '2013 Repair Data'
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
pie: {
shadow: false,
dataLabels: {
enabled: true
distance: 16
color: '#000000'
connectorColor: '#000000'
formatter: function () {
return '<span style="color:' + this.point.color + '">' + this.y + '</span>';
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>:' + this.y;
}
},
series: [{ name: 'Repairs',
data: [],
size: '100%',
innerSize: '60%',
showInLegend: true
}]
};
unibikiz = GetUniqueMPCItype();
for (var d = 0; d < unibikiz.length; d++) {
var newLP = [];
//var aName = unibikiz[d];
for (j = 0; j < trucks.length; j++) {
if (trucks[j].CIType == '2013 Repair Data') {
newLP.push([trucks[j].Area, parseInt(trucks[j].CI)]);
}
}
highOptions1.series[0].data = newLP;
chart = new Highcharts.Chart(highOptions1);
}
}
function mainCIPGraph() {
highOptions1 = {
chart: {
renderTo: 'container2'
type: 'pie'
},
title: {
text: 'Consumer interaction'
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
pie: {
shadow: false
dataLabels: {
enabled: true
distance: 16
color: '#000000'
connectorColor: '#000000'
formatter: function () {
return '<span style="color:' + this.point.color + '">' + this.y + '</span>';
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>:' + this.y;
}
},
series: [{ name: 'Repairs'
data: []
size: '100%'
innerSize: '60%'
showInLegend: true
}]
};
unibikiz = GetUniqueMPCItype();
for (var d = 0; d < unibikiz.length; d++) {
var newLP = [];
//var aName = unibikiz[d];
for (j = 0; j < trucks.length; j++) {
if (trucks[j].CIType == 'Consumer interaction') {
newLP.push([trucks[j].Area, parseInt(trucks[j].CI)]);
}
}
highOptions1.series[0].data = newLP;
chart = new Highcharts.Chart(highOptions1);
}
}
var tags = new Object();
function GetCIMPproducts() {
$.ajax({
url: 'IndiaOCRImprovement.aspx/mainPageConsumerPro',
type: 'POST',
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
tags = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
mainCIProdGraph();
},
error: function () { alert('Server Error!!!'); }
});
}
function mainCIProdGraph() {
highOptions2 = {
colors: ['#7FF8D2', '#FF9BCE', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
type: 'column',
renderTo: 'container3'
},
title: {
text: 'Consumer Interaction - Top Products Specific Areas'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'grey'
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter: function () {
var val = this.y;
if (val == 0) {
return '';
}
return val;
}
}
}
},
series: []
};
unibiz = GetCIMPSym();
highOptions2.xAxis.categories = GetUniqueMPProduct();
chart = new Highcharts.Chart(highOptions2);
for (var d = 0; d < unibiz.length; d++) {
var newLP = [];
var aName = unibiz[d];
for (j = 0; j < tags.length; j++) {
if (unibiz[d] == tags[j].Area) {
newLP.push([tags[j].Product, parseInt(tags[j].CI)]);
}
}
chart.addSeries({
name: aName,
data: newLP
}, false);
chart.redraw();
}
}
var gpdata = new Object();
function getGPHComment(selected) {
var obj = new Object();
if (selected == "3rd Party Applications") {
selected = "Applications";
}
obj.area = selected;
$.ajax({
url: 'IndiaOCRImprovement.aspx/GetGraphCommentDB',
type: 'POST',
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
gpdata = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
txtdisp(obj);
}
});
}
function txtdisp(ar) {
//if (ar.area == 'Main') {
var area = ar.area.toLowerCase();
for (i = 0; i < gpdata.length; i++) {
if (gpdata[i].GraphType == 'ClaimRate') {
$('#' + area + '_cr').empty();
$('#' + area + '_cr').append(gpdata[i].Comment);
}
if (gpdata[i].GraphType == 'CI') {
$('#' + area + '_ci').empty();
$('#' + area + '_ci').append(gpdata[i].Comment);
}
if (gpdata[i].GraphType == 'TopIssues') {
$('#' + area + '_ti').empty();
$('#' + area + '_ti').append(gpdata[i].Comment);
}
}
//}
}
function saveTxt(com, coj) {
var oject1 = new Object();
if ($('#' + com).text().length == 0) {
alert('Please Enter some text');
$('#' + com).focus();
//$('.edibut').addClass('ui-icon-disk');
$('.editbut').button({ icons: { primary: 'ui-icon-disk'} });
$('#' + com).append(coj);
return false;
}
else {
oject1.text = $('#' + com).text();
var comsplit = com.split('_');
var ard = comsplit[0].capitalize();
if (comsplit[1] == 'ci') {
oject1.graphtype = 'CI';
}
if (comsplit[1] == 'cr') {
oject1.graphtype = 'ClaimRate';
}
if (comsplit[1] == 'ti') {
oject1.graphtype = 'TopIssues';
}
oject1.area = ard;
//oject1.text = $("#" + com).val();
$.ajax({
url: 'IndiaOCRImprovement.aspx/SaveGraphComment',
type: 'POST',
data: JSON.stringify(oject1),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
},
error: function () { alert('Server Error!!!'); }
});
}
}
function GetDecibelData() {
$.ajax({
url: 'IndiaOCRImprovement.aspx/GetDecibelData',
type: 'POST',
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
tags = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
for (var u = 0; u < tags.length; u++) {
var table = $("#audtable tbody").append("<tr>" +
"<td>" + tags[u].ConsumerLocation + "</td>" +
"<td>" + tags[u].Level + "</td>" +
"<td>" + tags[u].MaxdbLevelObserved + "</td>" +
"<td>" + tags[u].City + "</td>" +
"</tr>");
}
},
error: function() { alert('Server Error!!!'); }
});
}
我得到的一个建议是使用1.9.1以下的jquery版本..现在我通过CDN链接使用1.9.0 ...仍然没有运气
任何建议都会有所帮助