文档模式IE8中的奇怪行为Highcharts饼图 [英] Strange behavior Highcharts pie chart in document mode IE8
本文介绍了文档模式IE8中的奇怪行为Highcharts饼图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个彼此相邻的4个饼图，在IE11文档模式IE5，IE7，IE9 +中都可以很好地显示，但在IE8上没有。
它在文档模式IE8中的功能：
当我用ctrl + f5刷新页面时：图表显示正确。当我使用f5进行刷新时：图表有一种方式可以使用大容器并显示在屏幕外（并且不在网格中）
我的JS：
$（function（）{
var chart;
var options = {
图：{
plotBackgroundColor：null，
plotBorderWidth：null，
plotShadow：false，
height：200
}，
legend：{
align：'right' ，
verticalAlign：'top'，
x：0，
y：40，
layout：'vertical'
}，
credits：{
启用：false
}，
title：{
margin：30，
style：{
color：'＃6e685c'，
fontSize：' 1 0px'
}
}，
tooltip：{
pointFormat：'Aantal：< b> {point.y}< / b>'
$，
plotOptions：{
pie：{
allowPointSelect：true，
cursor：'pointer'，
size：'100％'，
dataLabels：{
启用：true，
颜色：'＃454545'，
格式：'{point.y}'，
距离：10
}
$ b $（document）.ready（function（）{
//构建图表
options.title.text ='Financieel fout';
options.series = [{
type：'pie'，
name：'Kwaliteit'，
data：[{
name：'Goed'，
color：'＃93ab48'，
y：3
}，{
name：'Fout'，
color：'＃ac4742'，
y：3
}，{
name：'Onzeker'，
color：'＃e09647'，
y：1
}]
}];
$（'＃graph-1'）。highcharts（options）;
//建立图表
options.title.text ='Financieel onzeker';
options.series = [{
type：'pie'，
name：'Kwaliteit'，
data：[{
name：'Goed'，
color：'＃93ab48'，
y：3
}，{
name：'Fout'，
color：'＃ac4742'，
y：1
}]
}];
$（'＃graph-2'）。highcharts（options）;
//建立图表
options.title.text ='服务台';
options.series = [{
type：'pie'，
name：'Kwaliteit'，
data：[{
name：'Goed'，
color：'＃93ab48'，
y：3
}，{
name：'Fout'，
color：'＃ac4742'，
y：3
}，{
name：'Onzeker'，
color：'＃e09647'，
y：1
}]
}];
$（'＃graph-3'）。highcharts（options）;
//建立图表
options.title.text ='Controle';
options.series = [{
type：'pie'，
name：'Kwaliteit'，
data：[{
name：'Goed'，
color：'＃93ab48'，
y：3
}，{
name：'Fout'，
color：'＃ac4742'，
y：1
}]
}];
$（'＃graph-4'）。highcharts（options）;
}）; $（$ body body））。width（$（body）。width（） - 200）.delay（1000）.width（$（body）。width（）+ 200 ）;
}）;
HTML：
< div class =row>
< div class =col-md-6 graph-container border-right>
< h4> Rechtmatigheid< / h4>
< div class =clearfix>
< div id =graph-1class =col-md-6 no-horizontal-padding>< / div>
< div id =graph-2class =col-md-6 no-horizontal-padding border-right>< / div>
< / div>
< / div>
< div class =col-md-3 graph-container border-right no-horizontal-padding>
< h4 class =padding-left> Kwaliteit< / h4>
< div class =graph-container>
< div id =graph-3class =>< / div>
< / div>
< / div>
< div class =col-md-3 graph-container no-horizontal-padding>
< h4 class =padding-left>工作量< / h4>
< div class =graph-container>
< div id =graph-4class =no-horizontal-padding>< / div>
< / div>
< / div>
< / div>
和CSS
/ ************* ******************** /
/ *图表* /
/ *************** ******************************************** /
.graph-container {
}
.graph-container.border-right {
border-right：1px solid＃e5e5e5;
}
。图形容器.graphs-info {
margin：20px 0px;
}
.graphs-info {
color：＃6e685c;
line-height：26px;
}
.graphs-info .content-title {
font-size：17px;
font-weight：bold;
display：block;
margin-bottom：20px;
}
.graphs-info .graphs-info-title {
display：inline-block;
margin-right：6px;
}
.graphs-info .error {
color：＃830020;
}
.padding-left {
padding-left：20px！important;
}
我做错了什么或者这是一个错误？这会发生在IE8（实际浏览器）中。
解决方案在主机操作系统Windows XP上运行的IE8上没有发生此错误。因此，问题实际上是不存在的。另一个问题是我应该真正测试实际的IE8而不是文档模式。
I have 4 pie charts next to each other in a bootstrap grid which all show well in IE11 document modes IE5, IE7, IE9+, but not on IE8.
What it does in document mode IE8:
When I refresh the page with ctrl+f5: the charts show correct. When I refresh with f5: the charts have a way to big container and display out of screen (and way out of the grid)
My JS:
$(function () {
var chart;
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 200
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
layout: 'vertical'
},
credits: {
enabled: false
},
title: {
margin: 30,
style: {
color: '#6e685c',
fontSize: '10px'
}
},
tooltip: {
pointFormat: 'Aantal: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size:'100%',
dataLabels: {
enabled: true,
color: '#454545',
format: '{point.y}',
distance: 10
}
}
}
}
$(document).ready(function () {
// Build the chart
options.title.text = 'Financieel fout';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-1').highcharts(options);
// Build the chart
options.title.text = 'Financieel onzeker';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-2').highcharts(options);
// Build the chart
options.title.text = 'Service desk';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
}, {
name: 'Fout',
color: '#ac4742',
y: 3
}, {
name: 'Onzeker',
color: '#e09647',
y: 1
}]
}];
$('#graph-3').highcharts(options);
// Build the chart
options.title.text = 'Controle';
options.series = [{
type: 'pie',
name: 'Kwaliteit',
data: [{
name: 'Goed',
color: '#93ab48',
y: 3
},{
name: 'Fout',
color: '#ac4742',
y: 1
}]
}];
$('#graph-4').highcharts(options);
});
$("body").width($("body").width()-200).delay(1000).width($("body").width()+200);
});
The HTML:
<div class="row">
<div class="col-md-6 graph-container border-right">
<h4>Rechtmatigheid</h4>
<div class="clearfix">
<div id="graph-1" class="col-md-6 no-horizontal-padding"></div>
<div id="graph-2" class="col-md-6 no-horizontal-padding border-right"></div>
</div>
</div>
<div class="col-md-3 graph-container border-right no-horizontal-padding">
<h4 class="padding-left">Kwaliteit</h4>
<div class="graph-container">
<div id="graph-3" class=""></div>
</div>
</div>
<div class="col-md-3 graph-container no-horizontal-padding">
<h4 class="padding-left">Workload</h4>
<div class="graph-container">
<div id="graph-4" class="no-horizontal-padding"></div>
</div>
</div>
</div>
And the CSS
/***************************************************************/
/* GRAPHS */
/***************************************************************/
.graph-container{
}
.graph-container.border-right{
border-right: 1px solid #e5e5e5;
}
.graph-container .graphs-info{
margin: 20px 0px;
}
.graphs-info{
color: #6e685c;
line-height: 26px;
}
.graphs-info .content-title{
font-size: 17px;
font-weight: bold;
display: block;
margin-bottom: 20px;
}
.graphs-info .graphs-info-title{
display: inline-block;
margin-right: 6px;
}
.graphs-info .error{
color: #830020;
}
.padding-left{
padding-left: 20px !important;
}
Do I do something wrong or is this a bug? And will this occur in IE8 (actual browser)
解决方案
The bug didn't occur on IE8 running on Host OS Windows XP. Therefor the problem is actually non-existent. Another heads up that I should really test on actual IE8 and not the document modes.
这篇关于文档模式IE8中的奇怪行为Highcharts饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
