在IE8中Highcharts柱形图渲染透明列

时间:2013-08-29 03:12:28

标签: cakephp internet-explorer-8 highcharts transparent

Screenshot

除了IE8之外,所有浏览器上的柱形图都可以正常显示。 这是一个奇怪的错误。我无法在jsfiddle中复制它(是的,我尝试使用Jquery版本,我也使用-19.1.1)但是我把代码放在它上面,希望之前有人遇到过同样的问题。 http://jsfiddle.net/danushkab/kp5es/6/

$( '#monthlychart')。highcharts({         图表:{         类型:'列',         事件:{         click:function(event){                location ='/ GVEMS_2.0 /cvh /monthConsumption?date = 08/2013& building = cvhcampus';         }     }     },     标题:{         文字:'八月消费'         },     xAxis:{         输入:'datetime',         tickInterval:3 * 24 * 3600 * 1000,         dateTimeLabelFormats:{         一天:'%e',         },     标签: {         轮换:0,         对齐:'对',         风格:{         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并在一个缩放级别上,我可以隐约看到列。enter image description here

1 个答案:

答案 0 :(得分:0)

我弄明白了这个问题。当我在小柱形图中有多个系列时,似乎highcharts无法渲染。当我从柱形图中删除第二个系列时,它会正确呈现。