Code d'implémentation ichart.js pour le dessin de lignes pointillées et les effets moyens des lignes pointillées en pointillés
var data = new Array (); Data[0] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', color:'#1dbcfe', line_width:4, value : [80,75,92,62,0] } ] } Data[1] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', color:'#1dbcfe', line_width:4, value : [50,11,62,77,90] } ] } Data[2] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', Couleur: '# 1dbcfe', line_width: 4, valeur: [80,51,32,44,80]}]} var _bodywidth = $ ('body'). width () - 16; $ ('. item'). Chaque (fonction (i) {var _id = $ (this) .find ('. canvas-wap'). att ('id'); var chart = new ichart.linebasic2d ({rendu: _id, données: données [i] .datasets, align: 'Centre', frontière: 0, width: _bodywidth * 1.2, background_color: '# fafafa', animation: true, // ouverte animation animation_duration: 600, // 600ms animation complétée sub_option: {lisse: true, hollow: false, hollow_inside: false, point_size: 16, les écouteurs: {parisext: fonction (r, t) {return t + '; Étiquette: {FonTSize: 24, couleur: '# 333'},}, coordonnée: {width: _bodywidth * 1.6, valid_width: _bodywidth * 1.4, hauteur: _bodywidth * 1.6 * .5, striped_factor: 0.18, axe: {colore: '# aaa', width: [0,0] Échelle: [{Position: 'Left', start_scale: 0, end_scale: 100, Scale_space: 20, Scale_size: 2, Scale_enable: False, Label: {Color: '# 999', Fontze: 24}, Scale_Color: '# 999'}, {position: 'en bas', étiquette: {Color: '# 999', Fontsize: 24. Faux, étiquettes: données [i] .Labels}]}}); $ .each (data [i] .datasets [0] .value, fonction (i, val) {_total + = val;}); COO.getScale ('Left'), h = coo.height, h = (avg - s.start) * h / s.Distance, y = chart.y + h - h; chart.target.Textalign ("start ') .textBaseline (« Middle ») .TextFont (« 500 20px Verdana »).Le code ci-dessus est un exemple de JS pour dessiner plusieurs graphiques de lignes et une méthode de dessin d'une ligne pointillée moyenne dans chaque graphique de ligne.
Ichart.js est un très bon dessin icon du dessin. L'inconvénient est que du côté mobile, vous devez d'abord régler deux fois plus de taille, puis le réduire manuellement à la plage normale avec CSS et JS pour le maintenir à haute définition à l'écran.
Il existe des exemples de dessin de lignes moyennes sur le site officiel, mais il n'y a pas de lignes en pointillés. Généralement, afin de ne pas être confus, les lignes moyennes sont tracées à l'aide de lignes pointillées. Ici, je viens de faire boucle pour dessiner la ligne droite N-end, qui est une solution de contournement. S'il y a une meilleure façon, veuillez laisser un message. Merci.
Le code ci-dessus pour dessiner des lignes pointillés et des lignes pointillées également divisées dans ichart.js est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.