Application of embedding a vector Chart into an HTML5 Network Topology

Application of embedding a vector Chart into an HTML5 Network Topology

When we use HT for Web (HT) to develop HTML5 network topologies and projects with Chart requirements, we feel very painful. The Chart components integrated with HT do not contain coordinates, the presentation is not intuitive, but there is no solution. Let's talk about the specific solution.

First of all, the first solution is to add some custom plot areas in comps to define the Chart while defining the Chart vector to draw the desired axis, the results and examples are as follows:

 

For the definition code of the Chart, see Appendix 1 (the Code definition is too long). Although the code is long, the logic of the Code is not messy, and the vector Descriptions between modules are clear, for details, refer to the HT vector manual. I have no confidence to maintain such a long code. Maintaining such code is purely physical, and its reusability is not high, every different Chart should be drawn like this. It feels good to draw one or two of these charts. If you draw too many charts, it will really feel disgusting. This is a waste of time.

Second, the second solution is to customize the axis by data binding. To achieve the same effect, see Appendix 2 for the code. It can be seen that the amount of code is much better than the first solution, and the code can be reused. In other charts, you can set the text content of the horizontal and vertical axes to the attr attribute of data, and use the following code to define the chart to achieve the effect of the coordinate text:

ht.Default.setImage('chartName', {    width: Number,    height: Number,    comps: [        {            // define chart        },        {            type: 'xAxis',            rect: Array        },        {            type: 'yAxis',            rect: Array        }    ]});

Here I have passed ht. default. setCompType ('typename', function (g, rect, comp, data, view) {}) defines the CompType of xAxis and yAxis, the two comptypes draw the coordinate text of the horizontal and vertical axes respectively, instead of the first scheme to write multiple comptypes as text, slightly optimizing the code and improving the maintainability of the Code.

However, this is a bit difficult to use. The axis is part of the Chart, but it is hard to separate the Chart from the coordinate part in the definition Chart, if you need to define titles, scale coordinates, coordinate descriptions, and other requirements, this solution will not be able to easily solve most common requirements. You need to define many comptypes to render different requirements, in addition, it is not so refreshing in use. Solution 3 is to solve the usage and maintenance problems.

Finally, the third solution is similar to the second solution, both through ht. default. setCompType ('typename', function (g, rect, comp, data, view) {}) to define the CompType of axisChart. The difference is that, the data is not set to data, but in ht. default. in the comps of setImage (), its related attributes are directly defined. For details about the configuration attributes and the specific code implementation, you can view the attachment. The usage is very simple. Just introduce the attachment axisChart. js file while introducing the ht. js core file.

Next, let's take a look at the specific use of axisChart and several simple examples:

Example 1: Design the bar chart of current and voltage between different cells at the same time:

 

The Code is as follows:

Ht. default. setImage ('c1 ', {width: 600, height: 400, comps: [{type: 'axischart', rect: [0, 0,600,400], yAxis: [{name: 'UNIT: V', max: 270, min: 150, splitNumber: 10, axisTitle: {text: 'voltage ', rotate:-90}, axisLine: {arrow: true }},{ position: 'right', name: 'Unit: I', max: 20, splitNumber: 20, axisTitle: {text: 'electric ', rotate: 90}, axisLabel: {interval: 1}, axisLine: {arrow: true}], xAxis: [{type: 'category ', data: ['fu Mei yuan ', 'Deep in flowers ', 'zidong Garden', 'zijin yuan ', 'Washington shanshui', 'Water yunjian ', 'ruijing Xincheng'], axisTitle: {text: 'Community name'}], series: [{label: function (value) {return value + 'V';}, data: {values: [220,210,200,209,230,215,218], color: '# f90 '}}, {yAxisPosition: 'right', label: true, data: {values: [10, 4, 15, 9, 12, 18, 7], color: '# af0' }}]}]});

Example 2: A line chart showing the voltage of different cells at different times:

The Code is as follows:

 

Ht. default. setImage ('c2 ', {width: 600, height: 400, comps: [{type: 'axischart', rect: [0, 0,600,400], yAxis: [{name: 'UNIT: V', max: 240, min: 190, splitNumber: 10, axisTitle: {text: 'voltage ', rotate:-90}, axisLine: {arrow: true}], xAxis: [{type: 'time', min: new Date (2015, 0, 1), max: new Date (2015, 0, 2 ), splitNumber: 25, axisTitle: {text: 'time'}, axisLabel: {interval: 2, formatter: function (value, index, min, max) {return value. format ('dd-hh') ;}}, axisLine: {arrow: true}], series: [{type: 'line', data: {values: [220,210,200,209,230,215,218,220,210,200,209,230,215,218,209,230,215,218,220,210,200,209,230,215,218], color: '# f90' }}, {type: 'line', data: {values: [225,209,208,206,205,221,213,224,218,224,205,208,216,220,208,210,219,219,210,209,219,207,222,222,215], color:' #7d0 '}}, {type: 'line', linePoint: true, line3d: true, data: {values: [211,216,215,205,206,206,223,217,217,215,212,221,219,222,205,208,205,218,223,222,207,215,215,222,223], color: '# ab0' }}]});

 

Finally, it should be noted that the axisChart code is not so impeccable. I personally think there are still some shortcomings in code design, and there are about 1000 lines of all the code in total, I think it's too bloated, and I don't feel so friendly in design. When I want to modify it, I find that I have invested too much time, there are still a lot of things waiting for me to study and discuss, so let's just look at it. I will rebuild it when I have time, but I believe that the function can still meet most of the requirements, in terms of design, implementation, and bugs found during use, I hope you will not be able to give me any further advice.

 

Appendix 1

Ht. default. setImage ('chart', {width: 650, height: 380, comps: [// column chart {type: 'columnchart', rect: [10, 60,630,260], label: true, labelColor: '# 20284C', labelFont: '8px arial', series: [{color: '# 20284C', values: [471,482,567,525,590,637,780,679,848]}, {color: '#303F74', values: [275,290,361,328,346,341,440,423,505]}, {color: '# 7e93cd', values: [82,104,115,118,135,154,198,197,247]}, {color:' # a9b6db', values: [65, 78, 87, 87,113,130,167,159,213]}, // vertical line {type: 'rect ', rect: [15, 60, 1,260], background:' #566CB0 '}, {type: 'shape', rect: [5.5, 30, 20, 30], borderWidth: 1, borderColor: '#566CB0', points: [0, 20/3*2, 20/2, 0, 20, 20/3*2, 20/2, 0, 20/2, 30], segments: [1, 2, 2, 1, 2]}, // coordinate text {type: 'text', rect: [0,320-26*10-8, 15, 16], align: 'right', text: Math. round (84.8*10)}, {type: 'text', rect: [0,320-26*9-8, 15, 16], align: 'right', text: math. round (84.8*9)}, {type: 'text', rect: [0,320-26*8-8, 15, 16], align: 'right', text: math. round (84.8*8)}, {type: 'text', rect: [0,320-26*7-8, 15, 16], align: 'right', text: math. round (84.8*7)}, {type: 'text', rect: [0,320-26*6-8, 15, 16], align: 'right', text: math. round (84.8*6)}, {type: 'text', rect: [0,320-26*5-8, 15, 16], align: 'right', text: math. round (84.8*5)}, {type: 'text', rect: [0,320-26*4-8, 15, 16], align: 'right', text: math. round (84.8*4)}, {type: 'text', rect: [0,320-26*3-8, 15, 16], align: 'right', text: math. round (84.8*3)}, {type: 'text', rect: [0,320-26*2-8, 15, 16], align: 'right', text: math. round (84.8*2)}, {type: 'text', rect: [0,320-26*1-8, 15, 16], align: 'right', text: math. round (84.8*1)}, {type: 'text', rect: [0,320-8, 15, 16], align: 'right', text: 0 }, // Q {type: 'text', rect: [55,322, 0, 16], align: 'center', text: 'q2 \ '11'}, {type: 'text', rect: [124,322, 0, 16], align: 'center', text: 'q3 \ '11'}, {type: 'text', rect: [191,322, 0, 16], align: 'center', text: 'q4 \ '11'}, {type: 'text', rect: [259,322, 0, 16], align: 'center', text: 'q1 \ '12'}, {type: 'text', rect: [327,322, 0, 16], align: 'center', text: 'q2 \ '12'}, {type: 'text', rect: [394,322, 0, 16], align: 'center', text: 'q3 \ '12'}, {type: 'text', rect: [462,322, 0, 16], align: 'center', text: 'q4 \ '12'}, {type: 'text', rect: [529,322, 0, 16], align: 'center', text: 'q1 \ '13'}, {type: 'text', rect: [596,322, 0, 16], align: 'center', text: 'q2 \ '13'}, // line {type: 'rect ', rect: [15,320,620, 1], background:' #566CB0 '}, {type: 'shape', rect: [635,310.5, 30, 20], borderWidth: 1, borderColor: '#566CB0', points: [20/3*2, 0, 30, 20/2, 20/3*2, 20, 30, 20/2, 0, 20/2], segments: [1, 2, 2, 1, 2]});

Appendix 2

Ht. default. setCompType ('yaxis ', function (g, rect, comp, data, view) {var labels = data. a ('labels'), len = labels. length, x = rect. x, y = rect. y, w = rect. width, h = rect. height, dh = h/(len-1); g. save (); g. font = '12px arial, sans-serif'; g. fillStyle = 'black'; g. textAlign = 'right'; for (var I = 0; I <len; I ++) {g. fillText (labels [I], x, y); y + = dh;} g. restore () ;}); ht. default. setCompType ('xaxis ', function (g, rect, comp, data, view) {var labels = data. a ('xlabels'), len = labels. length, x = rect. x, y = rect. y, w = rect. width, h = rect. height, dw = w/(len * 3 + 1), dw3 = 3 * dw; x + = dw * 2; g. save (); g. font = '12px arial, sans-serif'; g. fillStyle = 'black'; g. textAlign = 'center'; for (var I = 0; I <len; I ++) {g. fillText (labels [I], x, y); x + = dw3;} g. restore () ;}); ht. default. setImage ('chart1', {width: 650, height: 380, comps: [// column chart {type: 'columnchart', rect: [10, 60,630,260], label: true, labelColor: '# 20284C', labelFont: '8px arial', series: [{color: '# 20284C', values: [471,482,567,525,590,637,780,679,848]}, {color: '#303F74', values: [275,290,361,328,346,341,440,423,505]}, {color: '# 7e93cd', values: [82,104,115,118,135,154,198,197,247]}, {color:' # a9b6db', values: [65, 78, 87, 87,113,130,167,159,213]}, // vertical line {type: 'rect ', rect: [15, 60, 1,260], background:' #566CB0 '}, // The up arrow {type: 'shape', rect: [5.5, 30, 20, 30], borderWidth: 1, borderColor: '#566CB0', points: [0, 20/3*2, 20/2, 0, 20, 20/3*2, 20/2, 0, 20/2, 30], segments: [1, 2, 2, 1, 2]}, // coordinate text {type: 'yaxis ', rect: [12, 60, 15,260]}, // Q {type: 'xaxis', rect: [10,330,630, 16]}, // line {type: 'rect ', rect: [15,320,620, 1], background:' #566CB0 '}, // The right arrow {type: 'shape', rect: [635,310.5, 30, 20], borderWidth: 1, borderColor: '#566CB0', points: [20/3*2, 0, 30, 20/2, 20/3*2, 20, 30, 20/2, 0, 20/2], segments: [1, 2, 2, 1, 2]});