ICHART.JS 점선을 그리기위한 구현 코드 및 평균 분할 점선 효과
var data = new array (); 데이터 [0] = {레이블 : [ "Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], DataSets : [{이름 : '우수성', '#1dbcfe', line_width : 4, 값 : [80,75,92,0]}} [1] = [Unit 1 "," "" "Unit 4", "Unit 5"], 데이터 세트 : [{이름 : '우수성', '우수성', 색상 : '#1dbcfe', line_width : 4, 값 : [50,11,62,77,90]}} 데이터 [2] = {레이블 : [ "Unit 1", "Unit 2", "Unit 3", "Unitent 5", "<etasets :" 색상 : '#1dbcfe', line_width : 4, 값 : [80,51,32,44,80]}]} var _bodyWidth = $ ( 'body'). width () -16; $ ( '. item'). 각 (함수 (i) {var _id = $ (this) .find ( '. canvas-wrap'). attr ( 'id'); var chart = new ichart.linebasic2d ({render : _id, data : data [i] .datasets, align : 'center : 0, width : _ bodywidth*2, : _ botherwidth*2, : _bodywidth*2, _bodywidth*2. background_color : '#fafafa', 애니메이션 : true, true, // 개방형 전환 애니메이션 애니메이션 : 600, // 600ms 완료된 애니메이션 서브 _option : {Smooth : True, Hollow : False, Holl 레이블 : {fontsize : 24, color : '#333'},}, coordinate : {width : _bodywidth*1.6, valid_width : _bodyWidth*1.4, 높이 : _BodyWidth*1.6*.5, Striped_factor : 0.18, Axis : {컬러 : '#aaa', in. 위치 : '왼쪽', start_scale : 0, end_scale : 100, scale_space : 20, scale_size : 2, scale_enable : false, label : {color : '#999', fontsize : 24}, scale_color : '#999'}, {position : 'scale :'#999 ', fontsize : fontsize : fontsize :'#999 ' 레이블 : 데이터 [i] .labels}]}); / ** 구성 요소를 사용자 정의하십시오. $ .Each (data [i] .datasets [0] .Value, function (i, val) {_total+= val;}); coo.getScale ( '왼쪽'), H = COO.Height, h = (avg -s.start) * h / s.distance, y = y+h -h; Target.textalign ( 'start') .TextBaseline ( 'Middle') .textFont ( '500 20px Verdana').위의 코드는 다중 라인 차트를 그리기위한 JS의 예이며 각 라인 차트 내에서 평균 점선을 그리는 방법입니다.
ICHART.JS는 JS를 그리는 매우 좋은 아이콘입니다. 단점은 모바일 측면에서 먼저 크기의 두 배를 설정 한 다음 CSS 및 JS로 수동으로 정상 범위로 좁혀 화면에서 고화질을 유지해야한다는 것입니다.
공식 웹 사이트에는 평균 라인을 그리는 예가 있지만 점선은 없습니다. 일반적으로 혼란스럽지 않기 위해 평균 선은 점선을 사용하여 그려집니다. 여기서 나는 단지 해결 방법 인 N- 엔드 직선을 그릴 수 있도록 루프했다. 더 나은 방법이 있다면 메시지를 남겨주세요. 감사합니다.
ICHART.JS에서 점선과 똑같이 분할 된 점선을 그리는 위의 코드는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.