ichart.js繪制虛線、平均分虛線效果的實現(xiàn)代碼
ichart.js繪制虛線、平均分虛線效果的實現(xiàn)代碼
var Data=new Array(); Data[0] = { labels : ["第一單元","第二單元","第三單元","第四單元","第五單元"], datasets : [ { name : '優(yōu)秀率', color:'#1dbcfe', line_width:4, value : [80,75,92,62,0] } ] } Data[1] = { labels : ["第一單元","第二單元","第三單元","第四單元","第五單元"], datasets : [ { name : '優(yōu)秀率', color:'#1dbcfe', line_width:4, value : [50,11,62,77,90] } ] } Data[2] = { labels : ["第一單元","第二單元","第三單元","第四單元","第五單元"], datasets : [ { name : '優(yōu)秀率', color:'#1dbcfe', line_width:4, value : [80,51,32,44,80] } ] } var _bodyWidth=$('body').width()-16; $('.item').each(function(i){ var _id=$(this).find('.canvas-wrap').attr('id'); var chart = new iChart.LineBasic2D({ render : _id, data: Data[i].datasets, align:'center', border:0, width : _bodyWidth*2, height : _bodyWidth*1.2, background_color:'#fafafa', animation : true,//開啟過渡動畫 animation_duration:600,//600ms完成動畫 sub_option : { smooth : true, hollow:false, hollow_inside:false, point_size:16, listeners : { parseText : function(r, t) { return t+'%'; } }, label:{fontsize:24,color:'#333'}, }, coordinate:{ width:_bodyWidth*1.6, valid_width:_bodyWidth*1.4, height:_bodyWidth*1.6*.5, striped_factor : 0.18, axis:{ color:'#aaa', width:[0,0,8,0] }, scale:[{ position:'left', start_scale:0, end_scale:100, scale_space:20, scale_size:2, scale_enable : false, label : {color:'#999',fontsize:24}, scale_color:'#999' },{ position:'bottom', label : {color:'#999',fontsize:24}, scale_enable : false, labels:Data[i].labels }] } }); /** *自定義組件,畫平均線。 */ chart.plugin(new iChart.Custom({ drawFn:function(){ /** *計算平均值的高度(坐標Y值) */ var _total=0; $.each(Data[i].datasets[0].value,function(i,val){ _total+=val; }); var avg = _total/Data[i].datasets[0].value.length,//計算出的平均分寫在這即可 coo = chart.getCoordinate(), x = coo.get('originx'), W = coo.width, S = coo.getScale('left'), H = coo.height, h = (avg - S.start) * H / S.distance, y = chart.y + H - h; for(xi=x;xi<=(x+W);xi=xi+32){ chart.target.line(xi,y,xi+16,y,2,'#fe941c'); } chart.target.textAlign('start') .textBaseline('middle') .textFont('500 20px Verdana') .fillText('平均戰(zhàn)勝率'+avg+'%',x+W-100,y-20,false,'#fe941c'); } })); chart.draw(); });
以上代碼是繪制多個折線圖的js示例,以及在每個折線圖內繪制平均分虛線的方法。
ichart.js是一個十分不錯的圖標繪制js,缺點是在移動端需要先設置兩倍大小,再用css和js手動縮小到正常范圍,以使其在屏幕上保持高清。
官網(wǎng)有繪制平均線的示例,但是沒有虛線的,而一般為了不混淆,平均線都是使用虛線繪制的。這里我只是循環(huán)繪制了n端直線,算是一個變通的方法。如有更好的方法請留言哦謝謝。
以上這篇ichart.js繪制虛線、平均分虛線效果的實現(xiàn)代碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- 使用Chart.js圖表庫制作漂亮的響應式表單
- Chart.js 輕量級HTML5圖表繪制工具庫(知識整理)
- 詳解Chart.js輕量級圖表庫的使用經(jīng)驗
- 在 Angular 中使用Chart.js 和 ng2-charts的示例代碼
- 使用Vue.js 和Chart.js制作絢麗多彩的圖表
- Chart.js在Laravel項目中的應用示例
- vue集成chart.js的實現(xiàn)方法
- 利用ECharts.js畫K線圖的方法示例
- JavaScript Chart 插件整理
- 詳解vue文件中使用echarts.js的兩種方式
- vue.js+Echarts開發(fā)圖表放大縮小功能實例
- Chart.js功能與使用方法小結
相關文章
javascript設計模式 – 迭代器模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 迭代器模式原理與用法,結合實例形式分析了javascript迭代器模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04js從10種顏色中隨機取色實現(xiàn)每次取出不同的顏色
昨天在做js 從10種顏色中隨機取色,并每次取出的顏色不同,具體的實現(xiàn)思路如下,感興趣的朋友可以參考下2013-10-10使用next.js開發(fā)網(wǎng)址縮短服務的方法
這篇文章主要介紹了使用next.js開發(fā)網(wǎng)址縮短服務,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06javascript 關于# 和 void的區(qū)別分析
href 為#的跳到了自己的頁面。原來‘#’代表的是 #top ,2009-10-10微信小程序開發(fā)之錄音機 音頻播放 動畫實例 (真機可用)
這篇文章主要介紹了微信小程序開發(fā)之錄音機 音頻播放 動畫實例 (真機可用),這里整理了詳細的代碼,有需要的小伙伴可以參考下。2016-12-12