前端通过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,当前分类纵轴值为Y3title: '我的折线图', 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

转载于:https://www.cnblogs.com/whiteme/p/7428555.html

前端通过jqplot绘制折线图相关推荐

web 前端绘制折线_html5绘制折线图
html5绘制折线图详细代码 (function (){ window.addEventListener("load", function(){ var data = [100,- ...
爬虫：爬取某个商品的历史价格并绘制折线图
目的:爬取某商品的历史价格并绘制折线图淘宝是没有把历史价格放在前端网页上的,而京东可以找到历史价格,但没有对应的日期.所以我是从专门的历史价格比较网爬取数据,这里推荐的是过客网.在F12F_{12} ...
canvas动态绘制折线图
公司的实践课题vue项目,用折线图展示近六个月的收入和支出,以前看到图表,第一个想到的就是从echarts官网调用,但这次导师建议我们用canvas去画,然后去封装,这样可以加大课题难度,同时理解底层 ...
matplotlib绘制折线图
matplotlib绘制折线图这阳春三月的邵大白在家过的什么日子,幽栖地僻经过少,花径不曾缘客扫~ 开个逗b号纪念下这段闭关的时光=^=万一他以后就变成一个数据分析的大v号了来~ 好了邵大白课堂开课 ...
python matplotlib绘制折线图
前言众所周知,matplotlib 是一款功能强大开源的数据可视化模块,凭借着强大的扩展性构建出更高级别的绘图工具接口如seaborn.ggplot.我们来看看往期学习章节内容概述吧~ 接下来,我们 ...
Tableau 绘制折线图
手把手教你 Tableau 绘制折线图折线图是将整个视图中的各个数据点连接起来,通常用于显示数据随着时间变化的趋势,或者预测未来的值. 绘制电影数量变化折线图数据展示操作步骤 1.对「上映时间」 ...
python matplotlib画折线图_python使用matplotlib绘制折线图教程
matplotlib简介 matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序 ...
python简单代码画曲线图教程-Python绘制折线图和散点图的详细方法介绍（代码示例）...
本篇文章给大家带来的内容是关于Python绘制折线图和散点图的详细方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.绘制折线图和散点图要用到matplotlib ...
python画折线图代码-Python绘制折线图和散点图的详细方法介绍（代码示例）
本篇文章给大家带来的内容是关于Python绘制折线图和散点图的详细方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.绘制折线图和散点图要用到matplotlib ...

前端通过jqplot绘制折线图

前端通过jqplot绘制折线图相关推荐

最新文章

热门文章