2013-03-25 2 views
4

최신 차트 버전의 Highcharts 라이브러리를 사용하고 있습니다. 전반적인 라이브러리는 꽤 멋지지만, 나는 귀찮은 문제에 직면했다. IE 8에서는 렌더링 할 단 하나의 옵션 만있을 때 도넛 형 차트가 올바르게 렌더링되지 않는다.하이 차트 도넛 형 차트가 IE 8에서 원형 차트로 렌더링됩니다.

  var chart; 
     var data = [['There could be only one', 1444]]; 
     var containerId = 'container'; 
     var chartTitle = 'Equity'; 

     $(document).ready(function() { 
Highcharts.theme = { 
    colors: ["#1987c9", "#7fba00", "#f4911e", "#006D75", "#542344", "#f7403a"] 
} 

var highchartsOptions = Highcharts.setOptions(Highcharts.theme); 

chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: containerId, 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     backgroundColor:'rgba(255, 255, 255, 0.1)' 
    }, 
    credits:{ 
     enabled:false 
    }, 
    legend:{ 
     align: 'right', 
     verticalAlign: 'middle', 
     layout: 'vertical', 
     width: 170, 
     itemStyle: { 
      fontSize: '13px' 
     } 
    }, 
    title: { 
     text: chartTitle, 
     style: { 
      fontSize: '17px' 
     } 
    }, 
    tooltip: { 
     pointFormat: '{series.name} <b>{point.y}</b>', 
     percentageDecimals: 1 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        return this.point.name +': '+ this.point.y.toLocaleString(); 
       }, 
       style: { 
        fontSize: '13px' 
       } 
      }, 
      innerSize: '40%', 
      showInLegend: true 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: chartTitle, 
     data: data 
    }], 
    exporting: { 
     enabled:false 
    } 
}); 

});

JSFiddle : http://jsfiddle.net/olanet/whZnP/2/

JSFiddle 결과 (IE 8 IE 8 호환성을 사용하거나 사용) : 아크가 렌더링 될 때 그것은 문제처럼 보인다 http://fiddle.jshell.net/olanet/whZnP/2/show/

Chart in IE 8

Chart in IE 9

+0

IE8에서 Highcharts 플러그인에 문제 같은데보고했습니다. IE8에서 제대로 작동하지 않는 차트를 만들려면 적어도 2 개의 0이 아닌 값이 있어야합니다. 예 : data = [[ '하나의'1444], [ '두 번째 값', 1]이있을 수 있습니다. –

+0

잘 보이는 것처럼 보이지만 문제를 해결하지는 못합니다 : http : // jsfiddle.net/olanet/9CRaP/19/. 그리고 전설은 IE에서 깨진 것 같습니다. – Alexey

답변

1

만 존재 완전히. 이 호의 작은 부분을 제거하면 문제가 사라집니다. end = mathRound((startAngleRad + (cumulative * circ)) * precision)/precision; 2. 추가 다음 코드 그 후 : 소스 1. 찾기 다음 행 :이 문제를 해결하려면 원의 작은 차이 만 같을 것이다 최종 결과를 추가

3.

if (len == 1) { 
    end -= 0.001; 
} 
: enter image description here

관련 문제