Internet explorer highcharts中的饼图在ie8中不起作用

我正在尝试使用highcharts库制作一个饼图，它在所有浏览器中都可以正常工作，但在IE8中不行，我花了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);

});

$（函数（）{
风险值数据=[
{
颜色：“rgb（241）”，
名称：“已消费”，
内部颜色：“rgb（68197241）”，
y:0
},{
颜色：“rgb（22,67148）”，
名称：“剩余”，
内部颜色：“rgb（245）”，
y:2
}
];
var颜色=[]；
var innerData=[]；
var outerData=[]；
var middleData=[]；
//内圈
innerData.push({
名称：'内圈'，
y:数据[0]。y，
颜色：数据[0]。颜色
});
//外圈
outerData.push({
名称：'外圆'，
y:数据[0]。y，
颜色：数据[0]。innerColor
});
middleData.push({
名称：'中间圆'，
y:数据[0]。y，
颜色：“ffffff”
});
颜色。推送（数据[0]。颜色）；
innerData.push({
名称：'内圈'，
y:数据[1]。y，
颜色：数据[1]。颜色
});
//外圈
outerData.push({
名称：'外圆'，
y:数据[1]。y，
颜色：数据[1]。innerColor
});
middleData.push({
名称：'中间圆'，
y:数据[1]。y，
颜色：“ffffff”
});
colors.push（数据[1].color）；
颜色：Highcharts.map（颜色，函数（颜色）{
返回{
径向梯度：{cx:0.5，cy:0.3，r:0.7}，
停止：[
[0，颜色]，
[1，Highcharts.Color（Color）.brighlight（-0.3）.get（'rgb'）]//darken
]
};
})
var my_图表={
图表：{
保证金：[3,0,3,0]，
背景颜色：“无”，
plotBackgroundColor:“无”，
绘图边框宽度：0，
影子：错，
renderTo:“我的图表”
},
图例：{
useHTML:true
}, 
标题：{
文本：“+con1+”+rem1+”，
是的，
对齐：'居中'，
垂直排列：'中间'，
y:0
},
学分：{
文本：“”
},
绘图区域：{
影子：空，
borderWidth:null，
背景颜色：空
},
图例：{
已启用：true
},
打印选项：{
馅饼：{
边框宽度：0
}
},
系列：[{
键入“pie”，
姓名:姓名,，
大小：“100%”，
startAngle:-90，
端角：270，
enableMouseTracking:false，
内部尺寸：“80%”，
数据：innerData，
影子：错，
数据标签：{
已启用：false
}
}, 
{
键入“pie”，
名称：“白边”，
大小：“70%”，
内部尺寸：“73%”，
数据：外部数据，
startAngle:-90，
端角：270，
enableMouseTracking:false，
影子：错，
数据标签：{
已启用：false
}
},{
键入“pie”，
名称：“whiteBorder2”，
颜色：“ffffff”，
startAngle:-91，
端角：480，
尺寸：75%，
内部尺寸：“80%”，
数据：middleData，
影子：错，
enableMouseTracking:false，
数据标签：{
已启用：false
}
}]
};
var图表=新的Highcharts.chart（我的图表）；
});

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上看到这一点，您没有正确地（可能）放置数据。我在highcharts.js v4.1.9中使用了虚拟数据及其在IE8上的工作，按Ctrl+F，找到

这个.renderer.gradients

并更改它：

try { var b = this.renderer.gradients[this.element.gradient]; } catch (korea) { } 

---

只需添加

try catch

我刚刚找到了答案，当y值等于零时，问题就会出现，当y值等于其他值时，它就可以找到。我不知道如何解决这个问题，但在我的例子中，我检查了值是否等于0，然后将值设置为0.001。

这是由于未能在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;
  }
};

---

希望有帮助。

我尝试过，但同样，我注意到当我添加消耗值等于剩余值时，它工作了，但我不希望它那样工作，我希望它显示消耗值和剩余值。我摆弄了它，它在ie8上工作，但当我在应用程序中使用它时，它不工作。看到这个，它应该是这样工作的。如果有任何错误，请查看浏览器的控制台。也许您有旧版本的Highcharts？尝试使用4.1.9？这是正确的答案！。。。令人惊叹的谢谢