前端通过jqplot绘制折线图

Posted 2020-10-04 whiteme

首先需要下载jqplot需要的js与css文件，我已近打包好了，需要的可以下载

接下来导入其中关键的js与css如下，

<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部分

<div id="chart" style="width:500px;height:300px;" ></div>  这里注意其中的id与之后js的$.jqplot(‘chart‘,data,option)中的第一个参数对应即可

js部分

$(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：要显示的位置。data：显示的数据。options：其它配置
    stackSeries: false, // 如果置为true并且有多个分类（如果是折线图，就必须多于一条折线）， 那么每个分类（折线）在纵轴上的值为其前所有分类纵轴值总和与其纵，轴值相加值（eg,当前分类纵轴值为Y3
    title: ‘我的折线图‘, 
    axes: {
        xaxis: {
         label: ‘X轴‘, //指定X轴的说明文字
         pad:0
        },
        yaxis: {
         label: ‘Y轴‘,  
         pad:0
        }
    },
    series:[
                {
                    lineWidth: 3, //指定折线的宽度
                    markerOptions: { style: "dimaond" } //指定折线的样式
                },
                {
                    //showLine: false, //指定是否显示线条
                    markerOptions: { size: 5, style: "circle" } //size设置每个节点的大小
                },
                {
                    markerOptions: { style: "filledSquare" }
                },
                {
                    showMarker:false
                }　　//分别对应4条线
            ],

    grid: {  
        gridLineColor: ‘#978887‘    // 设置整个图标区域网格背景线的颜色  
    }
});
});

其中关键的我在代码中已近说明了，需要代码的小伙伴可以自行下载

链接：http://pan.baidu.com/s/1pKIX41d 密码：2as7