IChart.js Implementierungscode zum Zeichnen von gepunkteten Linien und durchschnittlichen Teilen gepunktete Linien -Effekte
var data = new array (); Daten [0] = {Labels: ["Einheit 1", "Einheit 2", "Einheit 3", "Einheit 4", "Einheit 5"], Datensätze: [name: 'Exzellenzrate', Farbe: '#1dbcfe', Line_Width: 4, Wert: [80,72,62,0]}]} Data [1]. "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', Farbe: '#1dbcfe', Line_width: 4, Wert: [80,51,32,44,80]}]} var _bodywidth = $ ('body'). width ()-16; $ ('. item'). Jede (Funktion (i) {var _id = $ (this) .find ('. Canvas-Wrap'). attr ('id'); Hintergrund_Color: '#Fafafa', Animation: True, // Übergangsanimation Animation_duration öffnen: 600, // 600ms Fertiger Animation Sub_option: {glatt: TRUE, FALSE: FALSE, FALSCH: 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: 'links', start_scale: 0, end_scale: 100, scale_space: 20, scale_size: 2, scale_enable: false, label: {color: '#999', fontsize: 24}, scale_color: '#999'}, {{poste: 'bottom', label: {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ Falsch, Beschriftungen: Daten [i] .labels}]}}); $ .each (Daten [i] .Datasets [0] .Value, Funktion (i, val) {_total+= val;}); coo.getScale ('links'), h = coo.height, h = (avg - s.Start) * H / s.distance, y = chart.y+h - h; Diagramm.Target.Textalign ('Start') .TextBaSeline ('Middle') .TextFont ('500 20px Verdana') .FillText ('Durchschnittsgewinne'+avg+'%', x+w-100, y-20, false, '#fe941c');Der obige Code ist ein Beispiel für JS zum Zeichnen mehrerer Zeilendiagramme und einer Methode zum Zeichnen einer durchschnittlichen gepunkteten Linie in jedem Zeilendiagramm.
IchArt.js ist eine sehr gute Ikone -Zeichnung JS. Der Nachteil ist, dass Sie auf der mobilen Seite zuerst doppelt so groß wie die Größe einstellen müssen, und dann manuell mit CSS und JS auf den normalen Bereich einschränken müssen, um ihn auf dem Bildschirm hochauflösend zu halten.
Auf der offiziellen Website gibt es Beispiele für durchschnittliche Zeilen, aber es gibt keine gepunkteten Linien. Um nicht verwirrt zu werden, werden die durchschnittlichen Linien mit gepunkteten Linien gezogen. Hier habe ich gerade die N-End-geraden Linie gezogen, die eine Problemumgehung darstellt. Wenn es einen besseren Weg gibt, hinterlassen Sie bitte eine Nachricht. Danke schön.
Der obige Code zum Zeichnen von gepunkteten Linien und gleichermaßen geteilten gepunkteten Zeilen in iChart.js ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.