阳江房地产,奥运女排直播,芭耐得
示例代码托管在:http://www.github.com/dashnowords/blogs
博客园地址:
华为云社区地址:
使用原生canvasapi
绘制k线图。(截图以及数据来自于百度echarts官方示例库)。
k线图最常见的是在金融市场,尤其是股市中,它的绘制算法和表达的意思是直接相关的:
开盘价
,收盘价
,当日最高价
,当日最低价
4个数据点。开盘价
低于收盘价
时,当天为涨价,则图形为红色,反之则为绿色。当日最高价
和当日最低价
之间的连线。开盘价
和收盘价
之间的范围。了解了上述基本知识,k线图的绘制和折线图其实并没有太大区别,按部就班去绘制就好了。如果仔细观察echarts
官方提供的示例会发现图例中还有 ma5
,ma10
这样的图例标记,这里其实指的是n天的移动平均值moving average n,是减小数据波动性展示其宏观规律的常用方法之一,示例中的ma5
就是指依次将源数据中每5个点的值求平均值作为当前点的数据(至于5个点是从当前点开始算,还是从当前点结束都是可以的)。
实现难度较低,本文不再赘述。
/*数据点来自于百度echarts官方示例库 * 每个数据点意义:[日期,开盘(open),收盘(close),最低(lowest),最高(highest)] * 例如: ['2013/2/7', 2430.69,2418.53,2394.22,2433.89], */ /** * 绘制数据 */ function drawdata(options) { let data = options.data; let xlength = options.chartzone[2] - options.chartzone[0]; let c;//记录当前绘制点的颜色 let gap = xlength / options.xaxislabel.length; let activex = 0;//记录绘制过程中当前点的坐标 let activey = 0;//记录绘制过程中当前点的y坐标 context.strokewidth = 2; context.beginpath(); context.moveto(options.chartzone[0],options.chartzone[3]);//先将起点移动至0,0坐标 for(let i = 0; i < data.length; i++){ //获取绘图颜色 c = getcolor(data[i]); context.strokewidth = 1; context.strokestyle = context.fillstyle = c; //计算绘制中心点x坐标 activex = options.chartzone[0] + (i + 1) * gap; //绘制最高最低线; context.beginpath(); context.moveto(activex,transcoord(data[i][2])); context.lineto(activex,transcoord(data[i][3])); context.closepath(); context.stroke(); //绘制开盘收盘矩形 if (data[i][0] >= data[i][1]) { context.fillrect(activex - 5 , transcoord(data[i][0]) , 10, transcoord(data[i][1]) - transcoord(data[i][0])); } else{ context.fillrect(activex - 5 , transcoord(data[i][1]) , 10, transcoord(data[i][0]) - transcoord(data[i][1])); } } } //根据k线图的数据中开盘价和收盘价计算绘图颜色 function getcolor(data) { return data[0] >= data[1] ? '#1abc9c' : '#da5961'; } //从可视坐标系坐标转换为canvas坐标系坐标 function transcoord(coord) { return options.chartzone[3] - (options.chartzone[3] - options.chartzone[1])*(coord - options.ymin) / (options.ymax - options.ymin); }
浏览器中可查看效果:
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
html5 移动端视频video的android兼容(去除播放控件、全屏)
网友评论