我正在使用最新版本的Highcharts库。整体库看起来很酷,但是我遇到了一个非常烦人的问题:当只有一个选项需要渲染时,在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/
答案 0 :(得分:1)
看起来问题仅在完全呈现弧时存在。如果我们删除这个弧的一小部分比问题消失。要解决此问题:
1.在源代码中找到以下行:
end = mathRound((startAngleRad + (cumulative * circ)) * precision) / precision;
2.在其后添加以下代码:
if (len == 1) {
end -= 0.001;
}
3。这会在圆圈中添加一个小间隙,但最终结果如下:
答案 1 :(得分:0)
它看起来像一个错误,所以我报告了它https://github.com/highslide-software/highcharts.com/issues/1642