前端通过jqplot绘制折线图

Posted whiteme

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端通过jqplot绘制折线图相关的知识,希望对你有一定的参考价值。

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

以上是关于前端通过jqplot绘制折线图的主要内容,如果未能解决你的问题,请参考以下文章

python多个折线图合并到一个三维图

canvas图表详解系列:折线图

用matlab画折线图

Python中matplotlib绘制折线图方法总结

R语言 折线图

可视化实验十二:利用Python绘制箱线图折线图