请问多图HIGHCHART 在IE8下加载很卡,如何解决?

JavaScript023

请问多图HIGHCHART 在IE8下加载很卡,如何解决?,第1张

IE8不支持html5,在显示highCharts报表时自然会有不流畅甚至卡顿的感觉,而且LZ说一个页面显示那么多的报表图,我相信就在浏览这个页面的时候,电脑CPU使用率也是瞬间飙升的。

建议LZ把多个报表图拆分到多个页面上,不要放到一起,如果必须放到一起,那最好给它们加个顺序,一个一个来加载数据然后渲染,与此同时换个非IE内核的浏览器也是很有必要的。

chart.js的背景颜色是可以配置的,根据颜色值确定:

<!doctype html>

<html>

<head>

<title>Line Chart</title>

<script src="../Chart.js"></script>

<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">

<style>

canvas{

}

</style>

</head>

<body>

<canvas id="canvas" height="450" width="600"></canvas>

<script>

var lineChartData = {

 // x轴的标示

labels : ["January","February","March","April","May","June","July"],

 // 数据,数组中的每一个object代表一条线

datasets : [

{

// 颜色的使用类似于CSS,你也可以使用RGB、HEX或者HSL

// rgba颜色中最后一个值代表透明度

// 填充颜色

fillColor : "rgba(220,220,220,0.5)",

// 线的颜色

strokeColor : "rgba(220,220,220,1)",

// 点的填充颜色

pointColor : "rgba(220,220,220,1)",

// 点的边线颜色

pointStrokeColor : "#fff",

// 与x轴标示对应的数据

data : [65,59,90,81,56,55,40]

},

{

fillColor : "rgba(151,187,205,0)",

strokeColor : "rgba(151,187,205,1)",

pointColor : "rgba(151,187,205,1)",

pointStrokeColor : "#fff",

data : [28,48,40,19,96,27,100]

}

]

}

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData)

</script>

</body>

</html>