移动开发|绘制饼图、柱状图、2d、3d统计图表
程序员文章站
2022-03-25 23:37:32
...
通过HTML5的canvas来绘制图表功能，需要用到web控件。
iMAG内置了awesomechart.js用来显示统计图表，关于AwesomeChart的示例请参考Github上的Demo：AwesomeChartJS。
<?xml version="1.0" encoding="utf-8"?>
<imag>
<page orientation="landscape">
<title>
<center>
<label>Canvas统计图表</label>
</center>
</title>
<content>
<web include="awesomechart.js,canvas.js">
<![CDATA[
<html>
<head>
<style>
body {
margin:0;
padding:0;
}
canvas {
position:fixed;
width:100%;
height:100%;
}
</style>
</head>
<body>
<canvas id="chartCanvas13" width="350" height=350">
Your web-browser does not support the HTML 5 canvas element.
</canvas>
<script>
var chart13 = new AwesomeChart('chartCanvas13');
chart13.chartType = "pareto";
chart13.title = "Worldwide browser market share: December 2010";
chart13.data = [51.62,31.3,10.06,4.27,1.96,0.78];
chart13.labels = ['IE','Firefox','Chrome','Safari','Opera','Other'];
chart13.colors = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8'];
chart13.chartLineStrokeStyle = 'rgba(0, 0, 200, 0.5)';
chart13.chartPointFillStyle = 'rgb(0, 0, 200)';
chart13.draw();
</script>
</body>
</html>
]]>
</web>
</content>
</page>
</imag>效果：
引入awesomechart.js的同时引入canvas.js以适配高清屏的手机，iMAG内置的AwesomeChart已经在相应代码处进行了修改：
将原来JS代码里的canvas.width和canvas.height改成了canvas.canvasWidth和canvas.canvasHeight。
其中canvasWidth和canvasHeight是iMAG框架增加的属性。
AwesomeChartJS的功能相对比较简单，需要绘制更复杂的图表可以使用其他的Javascript库，比如ichart
此时需要把所依赖的js和css文件放到/res/default资源目录下。
上一篇： C语言的运算符你了解吗
下一篇： JSP的request对象实例详解