千里之行,始于足下。我们先从 Hello World 开始。
- <script type="text/javascript" src="ichart.1.2.min.js">
- </script>
- //定义数据
- $(function() {
- var chart = new iChart.Column2D({
- render: 'canvasDiv',
- //渲染的Dom目标,canvasDiv为Dom的ID
- data: data,
- //绑定数据
- title: 'Hello World\'s Height In Alphabet',
- //设置标题
- width: 800,
- //设置宽度,默认单位为px
- height: 400,
- //设置高度,默认单位为px
- shadow: true,
- //激活阴影
- shadow_color: '#c7c7c7',
- //设置阴影颜色
- coordinate: { //配置自定义坐标轴
- scale: [{ //配置自定义值轴
- position: 'left',
- //配置左值轴
- start_scale: 0,
- //设置开始刻度为0
- end_scale: 26,
- //设置结束刻度为26
- scale_space: 2,
- //设置刻度间距
- listeners: { //配置事件
- parseText: function(t, x, y) { //设置解析值轴文本
- return {
- text: t + " cm"
- }
- }
- }
- }]
- }
至此,简单的入门已经完成,但是不能仅限于此,拓展下思路,如果柱状图不仅仅是单色填充,而是各式各样的图形,或者具有渐变效果的填充,该如何实现呢?
首先看看我想实现的效果
再有:
查阅了 ichart 官方的 demo 和文档,未看到这方面的效果,只能自己动手,丰衣足食了。
首先实现一个相对简单的,绘制各种字符串。由于 ichart 底层是基于 canvas 的,所以只要拿到画笔,想画什么画什么,想画哪里画哪里。
首先运行上面的 HelloWorld,单步调试,找到最终绘制的入口。
- doDraw: function(_) {
- if (_.get('actived')) {
- _.drawRectangle();
- }
- },
这里就是最终绘制的入口,可见源码中仅仅可以绘制矩形,好单一的感觉。
修改后的这个的入口:
- doDraw: function(_) {
- if (_.get('actived')) {
- var _ = this._();
- var type = _.options.type;
- if (type === 'slash') {
- _.drawSlash();
- } else if (type === 'innerRect') {
- _.drawInnerRect();
- } else if (type === 'wire') {
- _.drawWire();
- } else if (type === 'star') {
- _.drawStar();
- } else if (type === 'exclamation') {
- _.drawExclamation();
- } else if (type === 'innerRectAndLine') {
- _.drawInnerRectAndLine();
- } else if (type === 'judge') {
- _.drawJudge();
- } else {
- _.drawRectangle();
- }
- }
- },
默认依然绘制矩形,但是根据传入的类别,可以绘制图形的图形,如 type==='exclamation',程序会调用_.drawExclamation(); 方法,我们看看 drawExclamation() 方法的定义:
- drawExclamation: function() {
- var _ = this._();
- var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get('border'), f_color=_.get('f_color'), shadow=_.get('shadow');
- _.T.box(
- _.get(_.X),
- _.get(_.Y),
- _.get(_.W),
- _.get(_.H),
- _.get('border'),
- _.get('f_color'),
- _.get('shadow'));
- var character = _.options.character && _.options.character.value;
- _.T.textStyle(_.L, 'middle', $.getFont(_.get('fontweight'), _.get('fontsize'), _.get('font')));
- _.T.fillText(character, x + w/2 - _.T.measureText(character)/2, y+h/2, _.get('textwidth'), border.color);
- },
代码中显示,首先绘制矩形 Box,其次绘制传入的文字,这样我们的货币汇率表就很容易实现了。
- drawSlash: function() {
- var _ = this._();
- var x = _.get(_.X),
- y = _.get(_.Y),
- w = _.get(_.W),
- h = _.get(_.H),
- border = _.get('border'),
- f_color = _.get('f_color'),
- shadow = _.get('shadow');
- _.T.box(_.get(_.X), _.get(_.Y), _.get(_.W), _.get(_.H), _.get('border'), _.get('f_color'), _.get('shadow'));
- var difcount = 9;
- var a = h / w,
- dx = parseInt(w / difcount),
- dy = dx * a;
- for (var i = x + dx; i <= x + w; i += dx) {
- var x0 = i - border.width,
- y0 = y + border.width;
- var x1 = x + border.width,
- y1 = y + dy * (i - x) / dx - border.width;
- _.T.line(x0, y0, x1, y1, border.width, border.color, false);
- if (i !== x) {
- var x0 = i - border.width,
- y0 = y + h - border.width;
- var x1 = x + w - border.width,
- y1 = y + dy * (i - x) / dx - border.width;
- _.T.line(x0, y0, x1, y1, border.width, border.color, false);
- }
- }
- },
效果图:
其他形状的图标类似,不再陈述。多看看一些效果图吧:
来源: http://www.tuicool.com/articles/rqInEbq