前端通过jqplot绘制折线图

2018-06-24 01:49:10来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

首先需要下载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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:sublime text 3 ctrl+b浏览器启动html

下一篇:盒子模型阴影设置,爱奇艺阴影配置