Highcharts列图表在IE8中呈现透明列 [英] Highcharts column chart rendering transparent columns in IE8

问题描述

柱形图呈现良好除IE8以外的所有浏览器。
这是一个奇怪的错误。我无法在jsfiddle中复制它（是的，我尝试使用我使用的Jquery版本 - 1.9.1），但是我在其上放置了代码，希望以前有人遇到同样的问题。 http://jsfiddle.net/danushkab/kp5es/6/

The column chart renders fine on all browsers except IE8. This is such a strange error. I can't replicate it in jsfiddle (yes I tried with the Jquery version I am using-1.9.1 as well)but I put the code on it in hopes someone has faced the same problem before. http://jsfiddle.net/danushkab/kp5es/6/

$（'＃monthlychart'）。highcharts（{
图表：{
类型：'列'，
事件：{
点击：function（event）{
location ='/GVEMS_2.0/cvh/monthConsumption？date = 08/2013& ;building=cvhcampus';
}
}
}，
title：{
text：'August Consumption'
}，
xAxis：{
type：'datetime'，
tickInterval：3 * 24 * 3600 * 1000，
dateTimeLabelFormats：{
day：'％e'，
}，
标签：{
rotation：0，
align：'right '，
style：{
fontSize：'9px'，
fontFamily：'Verdana，sans-serif'
}
}

$('#monthlychart').highcharts({ chart: { type: 'column', events: { click: function(event) { location = '/GVEMS_2.0/cvh/monthConsumption?date=08/2013&building=cvhcampus'; } } }, title: { text: 'August Consumption' }, xAxis: { type: 'datetime', tickInterval : 3*24 * 3600 * 1000, dateTimeLabelFormats: { day: '%e', }, labels: { rotation: 0, align: 'right', style: { fontSize: '9px', fontFamily: 'Verdana, sans-serif' } }

},
yAxis: {
    title: {
    text: 'kWh'
    },
min: 0
},
tooltip: {
    enabled:false
    },
exporting: {
    enabled:false
    },
credits: {
    enabled:false
    },
legend:{
    enabled:false
    },
plotOptions: {
    series: {
    marker: {
    enabled: false
    }
},
area: {
    events: {
    click: function(event) {
    // do something
    alert('Message goes here');
    }
}
}
},
series: [{
    name: 'Expected',
    color: '#FFA500',
    // Define the data points. All series have a dummy year
    // of 1970/71 in order to be compared on the same x axis. Note
    // that in JavaScript, months start at 0 for January, 1 for February etc.
    data: [
    [Date.UTC(2013, 7, 01),600  ],
    [Date.UTC(2013, 7, 02), 600   ],
    [Date.UTC(2013, 7, 03), 600     ],
    [Date.UTC(2013, 7, 04), 600   ],
    [Date.UTC(2013, 7, 05), 600    ],
    [Date.UTC(2013, 7, 06), 200    ],
    [Date.UTC(2013, 7, 07), 200    ],
    [Date.UTC(2013, 7, 08), 600    ],
    [Date.UTC(2013, 7, 09), 600     ],
    [Date.UTC(2013, 7, 10), 600     ],
    [Date.UTC(2013, 7, 11),600  ],
    [Date.UTC(2013, 7, 12), 600 ],
    [Date.UTC(2013, 7, 13), 200    ],
    [Date.UTC(2013, 7, 14), 200    ],
    [Date.UTC(2013, 7, 15), 600    ],
    [Date.UTC(2013, 7, 16), 600    ],
    [Date.UTC(2013, 7, 17), 600    ],
    [Date.UTC(2013, 7, 18), 600    ],
    [Date.UTC(2013, 7, 19), 600    ],
    [Date.UTC(2013, 7, 20), 200    ],
    [Date.UTC(2013, 7, 21), 200    ],
    [Date.UTC(2013, 7, 22), 600    ],
    [Date.UTC(2013, 7, 23), 600    ],
    [Date.UTC(2013, 7, 24), 600    ],
    [Date.UTC(2013, 7, 25), 600    ],
    [Date.UTC(2013, 7, 26), 600    ],
    [Date.UTC(2013, 7, 27), 200    ],
    [Date.UTC(2013, 7, 28), 200    ],
    [Date.UTC(2013, 7, 29), 600    ],
    [Date.UTC(2013, 7, 30), 600    ],
    [Date.UTC(2013, 7, 31), 600    ]
    ]
    }, {
    name: 'Actual',
    color: '#008000',
    data: [
    [Date.UTC(2013,7,1,0,0),26924.8725],[Date.UTC(2013,7,2,0,0),27782.64],[Date.UTC(2013,7,3,0,0),24195.7125],[Date.UTC(2013,7,4,0,0),21953.483288574],[Date.UTC(2013,7,5,0,0),22638.2603125],[Date.UTC(2013,7,6,0,0),23730.837127685],[Date.UTC(2013,7,7,0,0),24663.125631104],[Date.UTC(2013,7,8,0,0),28356.6825],[Date.UTC(2013,7,9,0,0),29145.711612549],[Date.UTC(2013,7,10,0,0),25810.3125],[Date.UTC(2013,7,11,0,0),22475.425946045],[Date.UTC(2013,7,12,0,0),26638.29],[Date.UTC(2013,7,13,0,0),27391.2075],[Date.UTC(2013,7,14,0,0),24108.060698242],[Date.UTC(2013,7,15,0,0),23461.750699463],[Date.UTC(2013,7,16,0,0),23477.921824951],[Date.UTC(2013,7,17,0,0),22509.527792969],[Date.UTC(2013,7,18,0,0),22666.365],[Date.UTC(2013,7,19,0,0),25029.497049561],[Date.UTC(2013,7,20,0,0),27556.8975],[Date.UTC(2013,7,21,0,0),28670.6025],[Date.UTC(2013,7,22,0,0),29151.765],[Date.UTC(2013,7,23,0,0),26790.615],[Date.UTC(2013,7,24,0,0),22380.954549561],[Date.UTC(2013,7,25,0,0),22478.057036133],[Date.UTC(2013,7,26,0,0),25803.405],[Date.UTC(2013,7,27,0,0),29242.4175],[Date.UTC(2013,7,28,0,0),27244.129099121],[Date.UTC(2013,7,29,0,0),0],[Date.UTC(2013,7,30,0,0),0],
    ]
    }]
});

我试着放大IE8，并且在一个缩放级别上，我可以微弱地看到列

I tried zooming in IE8 and on one zoom level I can see the columns faintly.

推荐答案

我找出了问题。当我在小柱形图中有多个系列时，看起来highcharts渲染有困难。当我从列图中删除第二个系列时，它正确渲染。

I figured out the problem. It seems highcharts is having trouble rendering when I have multiple series in the small column chart. It rendered properly when I removed the second series from the column chart.

这篇关于Highcharts列图表在IE8中呈现透明列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！