我试图使用highcharts库制作一个饼图,它在所有浏览器中都运行良好,但不是8,我花了3天时间试图找到问题,但没有任何结果和我在一起,请有人帮我吗? 这是我的剧本:
$(function () {
var data = [
{
color: "rgb(241,241,241)",
name: "consumed",
innerColor:"rgb(68,197,241)",
y: 0
},{
color: "rgb(22,67,148)",
name: "remaining",
innerColor:"rgb(245,245,245)",
y: 2
}
];
var colors =[];
var innerData = [];
var outerData = [];
var middleData = [];
// inner circle
innerData.push({
name: 'Inner Circle',
y:data[0].y,
color: data[0].color
});
// outer circle
outerData.push({
name: 'Outer Circle',
y: data[0].y,
color: data[0].innerColor
});
middleData.push({
name: 'Middle Circle',
y: data[0].y,
color: "#ffffff"
});
colors.push(data[0].color);
innerData.push({
name: 'Inner Circle',
y:data[1].y,
color: data[1].color
});
// outer circle
outerData.push({
name: 'Outer Circle',
y: data[1].y,
color: data[1].innerColor
});
middleData.push({
name: 'Middle Circle',
y: data[1].y,
color: "#ffffff"
});
colors.push(data[1].color);
colors: Highcharts.map(colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
})
var my_chart={
chart: {
margin: [3, 0, 3, 0],
backgroundColor: 'none',
plotBackgroundColor: 'none',
plotBorderWidth: 0,
plotShadow: false,
renderTo: 'myChart'
},
<?if($lang==1)
{?>
legend:{
useHTML:true
},
<? }?>
title: {
text:"<div style='font-size:20px !important;direction:ltr;color:rgb(68,197,241); '>"+con1+" </div><div style='direction:ltr;color:rgb(22,67,148);'> "+rem1+" </div>" ,
useHTML:true,
align: 'center',
verticalAlign: 'middle',
y: 0
},
credits: {
text: ''
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
legend: {
enabled: true
},
plotOptions: {
pie: {
borderWidth: 0
}
},
series: [{
type: 'pie',
name: name,
size: '100%',
startAngle: -90,
endAngle: 270,
enableMouseTracking: false,
innerSize: '80%',
data: innerData,
shadow: false,
dataLabels: {
enabled: false
}
},
{
type: 'pie',
name: "whiteBorder",
size: '70%',
innerSize: '73%',
data: outerData,
startAngle: -90,
endAngle: 270,
enableMouseTracking: false,
shadow: false,
dataLabels: {
enabled: false
}
},{
type: 'pie',
name: "whiteBorder2",
color: "#ffffff",
startAngle: -91,
endAngle: 480,
size: '75%',
innerSize: '80%',
data: middleData,
shadow: false,
enableMouseTracking: false,
dataLabels: {
enabled: false
}
}]
};
var chart= new Highcharts.Chart(my_chart);
});
答案 0 :(得分:2)
在highcharts.js v4.1.9中,按Ctrl + F,找到this.renderer.gradients
并更改:
try { var b = this.renderer.gradients[this.element.gradient]; } catch (korea) { }
只需添加try catch
。
答案 1 :(得分:1)
由于未能在IE8上使用不支持的渐变而由Highcharts.SVGElement.setRadialReference引起的。您可以通过忽略抛出的错误异常来解决问题,请在页面加载时尝试此操作:
Highcharts.SVGElement.prototype._setRadialReference = Highcharts.SVGElement.prototype.setRadialReference;
Highcharts.SVGElement.prototype.setRadialReference = function(coordinates) {
try {
return this._setRadialReference(coordinates);
} catch (e) {
return this;
}
};
希望有所帮助。
答案 2 :(得分:0)
IE8是严格的标记浏览器,在你的代码中你缺少“;”在你的代码中添加分号
colors: Highcharts.map(colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
}) //you missed semicolon here put ; here
在IE Fiddle here上看到这个,你没有正确地放置数据(可能)。我使用虚拟数据并在IE8上工作
答案 3 :(得分:0)
我只是找到了答案,问题发生在y值等于零时,当其值为其他任何东西时,它都可以找到。我不知道如何解决这个问题,但在我的情况下,我检查了当值等于0时,我将该值设为0.001。