최신 차트 버전의 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/
IE8에서 Highcharts 플러그인에 문제 같은데보고했습니다. IE8에서 제대로 작동하지 않는 차트를 만들려면 적어도 2 개의 0이 아닌 값이 있어야합니다. 예 : data = [[ '하나의'1444], [ '두 번째 값', 1]이있을 수 있습니다. –
잘 보이는 것처럼 보이지만 문제를 해결하지는 못합니다 : http : // jsfiddle.net/olanet/9CRaP/19/. 그리고 전설은 IE에서 깨진 것 같습니다. – Alexey