Docloud Background Management project (front end article)

The following is irrelevant to the subject, and if you don't want to see it you can ignore

!--neglect to start--!     

To recommend a powerful editor, that is the set of fast response, good experience, forcing lattice high, feature-rich as one of the sublime text 3. In addition to the above features, there is one of the most important features: convenient plug-in extension, support a large number of plug-ins and Support command line installation, as long as a simple command to complete the installation of plug-ins. To improve the development efficiency, sublime is a good choice!

!--neglect to end--!

The following are problems encountered during the development of the project or the front-end techniques learned:

　　

　　1. Invalid height:100% setting

Workaround: html,body{margin:0;height:100%}

　　2, Div Center

Workaround:

Two scenarios

1, the first case, div width fixed case, to the div set width, and then margin:0 Auto;

2, the second case, the div width is not fixed or do not want to give the div width limit, set Display:inline-block to Div; then add text-align:center to his parent element;

　　3, pure CSS implementation of odd even line

Workaround:

Using CSS: The Nth-child (odd) selector is available: Tr:nth-child (odd) {background-color: #eee}

　　4. Simple operation in CSS

Workaround:

Use the Calc function: Th{width:calc (100%/7);}

　　5. Traverse JS Object

Workaround:

For (var k in jsobj) {

Console.info ("key:" + K + ", Value:" + jsobj[k]);

}

　　6, solve the IE date.gettime compatibility problem

Workaround:

Because IE is incompatible with the YYYY-MM-DD date format, replacing "-" with "/" will solve the problem.

function GetTime (DATESTR) {
Datestr = Datestr.replace ("-", "/");
Return Date.parse (DATESTR);
}

　　

Because it is the background of data analysis, so the use of the chart, I used the plug-in is Highcharts, a little bit of experience using Highcharts:

　　

To facilitate the modification and rendering of data, a global parameter is generally defined

　　

Chart parameter var chart = {    chart: {        zoomtype: ' x ',        spacingright:20    },    title: {        text: ' Graph '    },    Xaxis: {        type: ' DateTime ',        title: {            text: ' Time '        },        datetimelabelformats: {            second: ' %h:%m:%s ',            minute: '%d day%h:%m ',            hour: '%M month%d%H ', Day            : '%Y year%M month%d ',            week: '%y-%m-%d '            , Month: '%y%m Month ', year            : '%y '}    ,    yaxis: {        title: {            text: ' Body temperature '    }}};

Inside the parameters are known, do not explain each, the specific can see the relevant documents. Here Xaxis the type: ' DateTime ' indicates that the x-axis is displayed by time.

Here is the diagram initialization method:

var ser = []; var ser = [];ser[0] = {    type: ' line ',    name: "Parameter name",    data: [        ["x value", "Y value"], ["x Value"        , "y value"],        ["x value", "Y value "]    ]};chart.series = ser;           $ (' #container '). Highcharts (chart);

The x-axis should be time-stamped when displayed by time, and remember to sort the array by the x-axis in ascending order before binding.

Docloud Background Management project (front end article)