Application of Vector Chart chart embedded in HTML5 network topology diagram

Developers using the HT for Web (hereinafter referred to as HT) to develop a HTML5 network topology diagram are painful when they have a project with a chart requirement, and the HT Integrated Chart component does not contain coordinates and is not very intuitive in presentation. But there is no solution, so let's talk about specific solutions.  

First of all, the first solution is to define the chart vector in comps in addition to defining the chart, add several of your custom drawing areas to draw the axes you want, the effect and example are as follows:

The Chart definition code is shown in Appendix 1 (the code definition is too long), although the code is long, but the logic of the code is not messy, the vector description between the modules is still relatively clear, specifically can refer to the vector manual HT, see Such a long code, I myself do not have the confidence to maintain it, Maintenance of such code is purely physical activity, and reusability is not high, each of the different chart to be similar to the drawing, draw one or two such a chart feel good, draw more, really feel very disgusting, and this is a waste of time.

Secondly, the second solution is to customize the drawing axes by data binding. To achieve the same effect, the code is shown in Appendix 2. It is obvious that the code is much better than the first solution, and that the code can be reused. In other diagrams, you can set the text content of the horizontal and vertical axes to the attr property of data, and use the following code to achieve the effect of the coordinate text when you define the chart:

Ht. Default.setimage (' Chartname ', {    width:number,    height:number,    comps: [        {            //define chart        },        {            type: ' Xaxis ',            rect:array        },        {            type: ' YAxis ',            rect:array        }    ]});

Here I have passed HT. The Default.setcomptype (' TypeName ', function (g, RECT, comp, data, view) {}) method defines the Comptypenamed Xaxis and YAxis, which are two C Omptype the horizontal and vertical axes of the coordinate text, instead of the first scheme to develop multiple comptype text, slightly optimize the code, improve the maintainability of the code.

However, this way, but the use of the total just feel a little awkward, obviously the axis is part of the chart, in the definition of the chart is hard to separate the diagram and coordinate parts, if the user also in the definition of title, coordinate scale, coordinate description and other requirements, The solution is still not able to solve most of the common requirements, need to define a lot of comptype to render different requirements, and in use is not so refreshing. The next step is to explain the three, is to solve the use and maintenance problems.

Finally, the third solution is similar to the second solution, all through HT. The Default.setcomptype (' TypeName ', function (g, RECT, comp, data, view) {}) method defines the Comptype with the name Axischart, and the difference is that the data is not set to , but in HT. Default.setimage () directly defines its related properties in the comps. The specific configuration property description and its specific code implementation can see the attachment, the use is very simple, in the introduction of the Ht.js core file, the introduction of annex 1, the Axischart.js file can be.

Next look at the specific use of Axischart and a few simple examples:

Example 1: A histogram histogram that designs the current 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, +, +], YAxis: [{name: ' Unit: V ', max:270,  min:150, Splitnumber:10, AxisTitle: {text: ' Voltage ', rotate: -90}, Axisline: {Arro W:true}}, {position: ' Right ', n                        AME: ' Unit: I ', max:20, splitnumber:20, AxisTitle: {                        Text: ' Current ', rotate:90}, AxisLabel: {                    Interval:1}, Axisline: {arrow:true            }    }], Xaxis: [{type: ' Category ', data: [' Touch                    Mei Yuan ', ' Deep lotus flower ', ' Purple East Garden ', ' Zijin Court ', ' Washington landscape ', ' water Cloud ', ' Rui Jing New Town ', AxisTitle: {text: ' cell name ' }}], series: [{label:function (value)                    {return value + ' V '; }, Data: {values: [209, 215, 218], C                    Olor: ' #f90 '}}, {yaxisposition: ' Right ',                        Label:true, data: {values: [10, 4, 15, 9, 12, 18, 7], Color: ' #af0 '}}}]});

Example 2: A line chart of voltage conditions in different cells at different times:

The code is as follows:

Ht. Default.setimage (' C2 ', {width:600, height:400, comps: [{type: ' Axischart ', rect                    : [0, 0, +, +], YAxis: [{name: ' Unit: V ', max:240,  min:190, Splitnumber:10, AxisTitle: {text: ' Voltage ', rotate: -90}, Axisline: {Arro W:true}}], Xaxis: [{type: ' Time ', Min:new date (0, 1), Max:new date (0, 2), SPL Itnumber:25, AxisTitle: {text: ' Time '}, a                            Xislabel: {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,                209, 215, 218], color: ' #f90 '}, {type: ' line ', data: {values: [225, 209, 208, 206, 205, 22                        1, 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, 2 215, 222, 223], color: ' #ab0 '}}]} );

Finally, there is a point to note that Axischart's code is not so invulnerable, I personally think that the code design is still some shortcomings, all the code in total there are almost 1000 lines, I feel too bloated, in the design I feel not so friendly, And so I want to change the time to find that has been put too much time, there are many things waiting for me to study, to explore, so also on the line, and so on, and so on, and then re-construct, but I believe that in the functional or can meet the majority of the needs, in the design, or the method of implementation, or in the Also hope that everyone can be generous to enlighten.

Appendix 1

Ht. Default.setimage (' chart ', {width:650, height:380, comps: [///Column chart {type: ' C Olumnchart ', rect: [Ten, 630, 260], label:true, Labelcolor: ' #20284C ', lab  Elfont: ' 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 bar {type: ' rect ', rect: [15, 60, 1, 260], Background: ' #566CB0 '        }, {type: ' Shape ', rect: [5.5, +, +], borderwidth:1, bo Rdercolor: ' #566CB0 ', points: [0, 20/3 * 2, 20/2, 0,, 20/3 * 2, 20/2, 0, 20/2, +], seg ments: [1, 2, 2, 1, 2]},//Coordinate text {type: ' text ', rect: [0, 320-26 * 10-8,            [+], align: ' right ', Text:Math.round (84.8 *)}, {type: ' text ',        Rect: [0, 320-26 * 9-8, +, +], align: ' right ', Text:Math.round (84.8 * 9)}, {type: ' text ', rect: [0, 320-26 * 8-8, +], 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, +, +], align: ' right ', Text:Math.round (84.8 * 5)}, { Type: ' Text ', rect: [0, 320-26 * 4-8, +], align: ' right ', Text:math . Round (84.8 * 4)}, {type: ' text ', rect: [0, 320-26 * 3-8, [+], AL  IGN: ' Right ', Text:Math.round (84.8 * 3)}, {type: ' text ', rect: [0, 320-  * 2-8, [+], align: ' right ', Text:Math.round (84.8 * 2)}, {type:        ' Text ', rect: [0, 320-26 * 1-8, +], align: ' right ', Text:Math.round (84.8 * 1) }, {type: ' text ', rect: [0, 320-8, +], align: ' right ', t        ext:0},Q {type: ' text ', rect: [322, 0, +], align: ' center ', text: ' Q2            \ ' One '}, {type: ' text ', rect: [124, 322, 0, +], align: ' center ', Text: ' q3\ '}, {type: ' text ', rect: [191, 322, 0, +], align: ' cente R ', text: ' Q4\ '}, {type: ' text ', rect: [259, 322, 0, +], a            Lign: ' Center ', text: ' Q1\ '}, {type: ' text ', rect: [327, 322, 0, 16], Align: ' center ', text: ' Q2\ '}, {type: ' text ', rect: [394, 3 0, +], align: ' center ', text: ' q3\ '}, {type: ' text ', r            ECT: [462, 322, 0, +], align: ' center ', text: ' q4\ ', ' {type: ' text ', Rect: [529, 30, +], align: ' center ', text: ' q1\ ', {type: ' text ', r            ECT: [596, 322, 0, +], align: ' center ', text: ' Q2\ ' "},//Line { Type: ' Rect ', rect: [620, 1], background: ' #566CB0 '}, {type: ' s Hape ', rect: [635, 310.5, +, +], borderwidth:1, bordercolor: ' #566CB0 ', poi    NTS: [20/3 * 2, 0, 20/2, 20/3 * 2, 0, 20/2], 20/2: [1, 2, 2, 1, 2]} ]});

Appendix 2

Ht. Default.setcomptype (' YAxis ', function (g, RECT, comp, data, view) {var labels = data.a (' ylabels '), Len = Lab            Els.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 = Lab            Els.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: [Ten, 630, 260], label:true, Labelcolor: ' #20284C ', LA Belfont: ' 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 bar {type: ' rect ', rect: [15, 60, 1, 260], Background: ' #566CB0 '},//arrow up {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, +], segments: [1, 2, 2, 1, 2]},//Coordinate text {type: ' YAxis ',        RECT: [260]},//Q {type: ' Xaxis ', rect: [10, 330, 630, 16] },//Line {type: ' rect ', rect: [620, 1], background: ' #566CB 0 '},//Rightwards Arrow {type: ' Shape ', rect: [635, 310.5, +], Borderwi Dth:1, bordercolor: ' #566CB0 ', points: [20/3 * 2, 0, 30, 20/2, 20/3 * 2, 20, 30, 20/2, 0, 2 0/2], Segments: [1, 2, 2, 1, 2]}];

Application of Vector Chart chart embedded in HTML5 network topology diagram