高图中的饼图在ie8中不起作用

时间:2015-10-12 09:09:57

标签: internet-explorer highcharts

我试图使用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);

});

4 个答案:

答案 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。