Highcharts achieves multi-data line chart display

Highcharts implements multiple dataLine chartDisplay by Column

By zyz

Highcharts is a very useful web-side drawing plug-in that is very convenient to use. It provides excellent official support and has Chinese APIs (incomplete ), the image is also pretty. Recently, you need to use highcharts to draw a line chart for multi-data display and comparison. The expected results are similar.

The feature of this graph is that the Y axis is displayed from large to small. Multiple x axes correspond to multiple different broken lines, and the scale of each X axis is different, and the color of each broken line is also different, and do not cross the line.

I have been searching for a long time in the official online demonstration and have not found any examples that can achieve this effect. Although there are examples of multi-axis and multi-line display, the line will cross and cannot meet the requirements. It is estimated that this effect is rarely used, so there is no such effect in the demo. I found no similar settings in the API (it may be that my personal negligence was not found. If a friend knows how to implement the settings, I 'd like to leave a message to inform you. Thank you ).

I finally used the splicing method to achieve this effect. The general principle is to map each line separately, and finally combine all the canvas left and right to achieve the effect.

The usage is as follows:

1. Prepare data for drawing and process the data as follows according to the data requirements (http://www.hcharts.cn/api/index.php#series.data) in the API.

// Obtain and process the data into the available Structure Function showfluidproporties (wellid) {var arrayall = []; // load all the line $. post ('ajax/getfluidproportieshandler. ashx', {wellid: wellid}, function (data) {var JSON = eval ('+ Data +'); var rows = JSON. rows; var temppoint = []; // temporarily load the x and y values of each vertex var templine = []; // temporarily load all vertices in each line for (var j = 0; j <arraytitle. length; j ++) {for (VAR I = 0; I <JSON. total; I ++) {// manufacturing point data temppoint. push (number (rows [I] [arraytitle [J]), number (rows [I]. samplingwelldepth); // Add a vertex templine for the line. push (temppoint); // clear the temporary point temppoint = [];} // Add the line to the line set arrayall. push (templine); // clear the temporary line templine = [];} // draw if (arrayall) showlines (arrayall) using the line set );});}

The data in the function is obtained on the server and is applicable to the JSON string of the DataGrid in easyui.

The arraytitle is defined before the function.

// The column name set var arraytitle = ['density ', 'mide', 'viscosity', 'r600 ', 'r300', 'r200 ', 'r100', 'r6', 'r3 '];

2. Since each line is roughly the same, I set a common attribute for the line chart. For more information, see the API.

// Chart attributes var Options = {chart: {renderto: '', // line chart type: 'line', // It indicates the line chart is spacingtop: 25, // The distance from the widget to the top is spacingbottom: 10, // The distance from the widget to the bottom is marginleft: 0, // the left of the line chart is marginright: 0 // right margin of the line chart}, Title: {text: ''}, // Title of the line chart credits: {enabled: false}, // whether to display the copyright information plotoptions: {Line: {marker: {enabled: false // whether to display the dot mark }}, xaxis: {linecolor: '', // tickcolor :'', // dial line color maxpadding: 0.2, // ratio of the maximum distance of the line from the dial line to the length of the dial line minpadding: 0.2, // The ratio of the minimum distance of the line to the length of the Line gridlinewidth: 1, // The Grid line width minortickinterval: 'auto', // The interval between small scales minorticklength: 5, // minortickwidth: 1 for a small scale, // minortickcolor: ''for a small scale, // The color endontick: true for a small scale, // whether to end the title with a scale: {// specify the title text: '', style: {fontweight:" bold ", fontsize: '10pt' }}, yaxis: {linecolor: '#000 ', linewidth: 1, tickcolor: '# 000', ticklength: 5, tickwidth: 1, Min: 0, // set the value of the minimum scale maxpadding: 0.01, minpadding: 0.1, gridlinewidth: 1, reversed: True, // whether to flip the display, from large to small minortickinterval: 'auto', Title: {// specify the title Text of the Y axis: 'depth ', style: {fontweight: "bold", fontsize: '10pt' }}, series: [{// line attribute name: '', // line name color :'', // line color data: [] // line point data}]}

3. The following figure shows the graph.

Since each line is drawn independently, you need to set a separate color for each line. Otherwise, there is no comparison between the two colors.

// Color set var setcolors = ['#2f7ed8', '# 0d233a', '#8bbc21', '#910000', '# 1aadce', '#492970 ', '# f28f43', '#77a1e5', '# c000025',' # a6c96a ']; // var setcolors = [' #058dc7 ',' #50b432 ', '# ed561b', '# dddf00', '#24cbe5', '#64e572', '# ff9655', '# fff263', '#6af9c4']; // var setcolors = ['# 7cb5ec', '#434348', '# 90ed7d', '# f7a35c', '#8085e9', '# f15c80 ', '# e4d354', '#8085e8', '#8d4653', '#91e8e1'];

I use multiple line charts to draw images independently. I need to allocate a div space for each graph. You can also dynamically generate <div> in the graph function.

    <div style="width: auto; height: 750px; margin: 10px; border: 2px #416AA3 solid;        margin: 10px;">        <div style="width: 190px; height: 700px; float: left;" id="FluidProporty0">        </div>       ……        <div style="width: 115px; height: 700px; float: left;" id="FluidProporty8">        </div>    </div>

To achieve the effect, I need to seamlessly connect all the lines between the left and right, and only display the Y axis in the leftmost line chart. To hide the Y axis, set the marginleft attribute of the line chart to 0, and it is seamlessly connected to the previous line chart. Here I used the method of generating a line chart cyclically. As follows:

// Display the line. For details, see the highchart API function showlines (arrayall) {for (VAR I = 0; I <arraytitle. length; I ++) {var tempoptions = options; if (I = 0) {// The first line chart on the left Delete tempoptions. chart. marginleft; // This statement deletes attributes} else {tempoptions. chart. marginleft = 0; tempoptions. yaxis. title. TEXT = '';} tempoptions. chart. renderto = 'fluidproporty '+ I; tempoptions. title. TEXT = arraytitle [I]; tempoptions. series [0] = {Name: arraytitle [I], color: setcolors [I], data: arrayall [I]}; tempoptions. xaxis. linecolor = setcolors [I]; tempoptions. xaxis. tickcolor = setcolors [I]; tempoptions. xaxis. minortickcolor = setcolors [I]; // draw a line var chart = new highcharts Based on the line attributes. chart (tempoptions );}}

Finally, the following result is displayed, which basically meets the requirements.

Refer:

Online highcharts demo

Http://www.hcharts.cn/demo/index.php

Highcharts semi-Chinese API documentation

Http://www.hcharts.cn/api/index.php