Use jqplot to draw a line chart and jqplot to draw a line chart.

Use jqplot to draw a line chart and jqplot to draw a line chart.

First, you need to download the js and css files required by jqplot. I have nearly packed them. You can download them if you need them.

Next, import the key js and css as follows,

<link href="css/jquery.jqplot.min.css" rel="stylesheet" /><script src="js/jquery.min.js"></script><script src="js/jquery.jqplot.min.js"></script><script src="js/jqplot.canvasTextRenderer.js"></script><script src="js/jqplot.canvasAxisLabelRenderer.js"></script>

Html section

<Div id = "chart" style = "width: 500px; height: 300px;"> </div> pay attention to the id and $. the first parameter in jqplot ('chart', data, option) corresponds

Js Section

$ (Function () {var cosPoints = []; for (var I = 0; I <2 * Math. PI; I + = 0.4) {cosPoints. push ([I, 2.5 + Math. pow (I/4, 2)]);} $. jqplot ('chart', [[1, 3, 4, 5, 6], [5, 6, 8, 9, 12], [3, 6, 7, 8, 9], cosPoints], {// $. jqplot ('chart', data, option); target: the position to be displayed. Data: The displayed data. Options: Other stackSeries: false, // if it is set to true and has multiple categories (if it is a line chart, there must be more than one line chart), then each category (line chart) the value on the vertical axis is the sum of the values of the vertical axis and its vertical axis of all previous categories. The value of the Axis value is the sum of the values (for example, the current vertical axis value is Y3 title: 'My line my', axes: {xaxis: {label: 'x axis ', // specifies the description text pad: 0} for the X axis, yaxis: {label: 'y axis', pad: 0 }}, series: [{lineWidth: 3, // specify the width of the line markerOptions: {style: "dimaond"} // specify the line style}, {// showLine: false, // specify whether to display the line markerOptions: {size: 5, style: "circle"} // size to set the size of each node}, {markerOptions: {style: "filledSquare" }}, {showMarker: false} // corresponds to four lines respectively], grid: {gridLineColor: '#978887' // set the color of the grid background of the entire icon area }});});

I have explained the key points in the code. You can download the code by yourself.

Link: http://pan.baidu.com/s/1pKIX41d password: 2as7