Implementation Code for drawing dotted lines and evenly distributed dotted lines in ichart. js, and ichart. js dotted lines

Implementation Code for drawing dotted lines and evenly distributed dotted lines in ichart. js, and ichart. js dotted lines

Implementation Code of the dotted line and evenly distributed dotted line drawn by ichart. js

Var Data = new Array (); Data [0] = {labels: ["unit 1", "unit 2", "unit 3", "Unit 4 ", "Unit 5"], datasets: [{name: 'excellent rate', color: '# 1dbcfe', line_width: 4, value: [, 62, 0]} Data [1] = {labels: ["unit 1", "unit 2", "unit 3", "Unit 4", "Unit 5"], datasets: [{name: 'excellent rate', color: '# 1dbcfe', line_width: 4, value, 90]} Data [2] = {labels: ["unit 1", "unit 2", "unit 3", "Unit 4", "Unit 5"], datasets: [{name: 'Excellent rate', 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-wrapp '). 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, // enable the animation. Ation: 600, // 600ms animation completed 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: [,]}, scale: [{position: 'left', start_scale: 0, end_ SC Ale: 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}]});/*** custom component, draw the average line. */Chart. plugin (new iChart. custom ({drawFn: function () {/*** calculate the average height (coordinate Y value) */var _ total = 0; $. each (Data [I]. datasets [0]. value, function (I, val) {_ total + = val;}); var avg = _ total/Data [I]. datasets [0]. value. length, // write the calculated average score here. coo = chart. getCoordinate (), x = coo. get ('original'), 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.tar get. line (xi, y, xi + 16, y, 2, '# fe941c');} chart.tar get. textAlign ('start '). textBaseline ('middle '). textFont ('20px Verdana 500 '). fillText ('average victory rate' + avg + '%', x + W-100, y-20, false, '# fe941c') ;}}); chart. draw ();});

The above code is a js example for drawing multiple line charts and a method for drawing an even dotted line in each line chart.

Ichart. js is a very good icon to draw js. The disadvantage is that you need to set twice the size on the mobile end, and then manually narrow it down to the normal range using css and js, to keep it in high-definition on the screen.

The official website provides examples to draw the average line, but there is no dotted line. Generally, to avoid confusion, the average line is drawn using dotted lines. Here I just cyclically draw n-side straight lines, which is a work und. If you have a better method, please leave a message. Thank you.

The above implementation code for drawing dotted lines and evenly distributed dotted lines in ichart. js is all the content that I have shared with you. I hope you can give me a reference and support me a lot.