一、准备工作

首先我们需要到官网下载所需的文件:

官网下载笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本

然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2012环境下新建的,并且所需的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> <!--[if lt IE 9]>
<script src="js/excanvas.min.js"></script>
<![endif]-->
<script src="js/jqplot.highlighter.min.js"></script>
<script src="js/jqplot.cursor.min.js"></script>
<script src="js/jqplot.dateAxisRenderer.min.js"></script>

其中最后两个js文件在plugins下,今后会经常使用到这个文件夹下的文件,因为他们是很多扩展功能所需的文件。除了引用基本的文件之后我们还需要放置一个占位符用来作为图表的容器,我们需要放置一个宽度为500高度为300的DIV:

 <div id="chart" style="width:500px;height:300px;" ></div>

二、正文

本节我们将学习如何在折线图中高亮用户选择的节点并显示对应的数据,关键主要是设置highlighter属性,比如下面的代码将可以实现图1.1的效果:

         $(function () {
var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88],
['22-Aug-08', 509.84], ['26-Sep-08', 454.13], ['24-Oct-08', 379.75],
['21-Nov-08', 303], ['26-Dec-08', 308.56], ['23-Jan-09', 299.14],
['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]]; $.jqplot('chart', [line1], {
title: "数据节点高亮",
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: "%b&nbsp;%#d"
}
},
yaxis: {
tickOptions: {
formatString: "$%.2f"
}
}
},
highlighter: {
show: true,
sizeAdjust: 15
}
});
});

读者主要这里的分类名称的格式是时间,而不是单纯的名称了,所以我们需要借助特定的引擎来输出,所以这里我们借助了dateAxisRenderer引擎来输出,当然读者也可以使用之前的引擎,只是会将这个时间按照原版的样子输出而已,然后就是tickOptions属性中的formatString属性,它是用来指定显示的文字的格式。这里关键的是highlighter属性,其中show表示是否启用,而sizeAdjust则表示高亮的程度,我们可以通过下面这个图看出效果。

图1.1

当我们指定sizeAdjust的值越大,则这个圈也越大。

上图中我们可以看到,只有我们选择了某个节点才可以看到对应的值,但是我们还可以通过另一种指针的方式查看整个图表所选位置的X轴信息以及Y轴信息,通过这个方式我们就可以查看折线图中折线的大致值了,下面我们就通过指定cursor来实现图1.2的效果:

         $(function () {
var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88],
['22-Aug-08', 509.84], ['26-Sep-08', 454.13], ['24-Oct-08', 379.75],
['21-Nov-08', 303], ['26-Dec-08', 308.56], ['23-Jan-09', 299.14],
['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]]; $.jqplot('chart', [line1], {
title: "数据节点高亮",
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: "%b&nbsp;%#d"
}
},
yaxis: {
tickOptions: {
formatString: "$%.2f"
}
}
},
highlighter: {
show: true,
sizeAdjust: 15
},
cursor: {
show: true,
tooltipLocation: 'sw'
}
});
});

这里的curosr跟highlighter类似,首先要启用,然后通过tooltipLocation指定提示显示的位置。

图1.2

jqPlot图表插件学习之数据节点高亮和光标提示的更多相关文章

  1. jqPlot图表插件学习之ajax-json数据加载

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  2. jqPlot图表插件学习之折线图-散点图-series属性

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  3. jqPlot图表插件学习之柱形图和旋转分类名称

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  4. jqPlot图表插件学习之饼状图和环状图

    一.准备工作 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...

  5. jqPlot图表插件学习之阴阳烛图

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  6. jqPlot图表插件学习之轴说明和label属性

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  7. 图表插件--jqplot交互演示样例

    简单交互 在之前的学习中,我们已经能够绘制各种类型的图表,也能够给图表加入不同的组件,如标题.图例等等.但这些图表仅仅能用于展示数据,一旦希望对图表有所操作--比方查看数据明细--就显得束手无策了.事 ...

  8. [开发笔记]-Jqplot图表初体验

    文章内容为初次使用Jqplot图表插件的测试代码,仅供参考. <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  9. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

随机推荐

  1. python的单例模式:

    python的单例模式:http://funhacks.net/2017/01/17/singleton/ https://www.cnblogs.com/huchong/p/8244279.html ...

  2. Netty Associated -- Channel

    A nexus to a network socket or a component which is capable of I/O operations such as read, write, c ...

  3. 聊一聊Spring中的线程安全性

    Spring作为一个IOC/DI容器,帮助我们管理了许许多多的“bean”.但其实,Spring并没有保证这些对象的线程安全,需要由开发者自己编写解决线程安全问题的代码. Spring对每个bean提 ...

  4. 【转载】Qt Creator 添加自定义注释

    原文:https://blog.csdn.net/liang19890820/article/details/54925434 自定义注释注释的原则是有助于对程序的阅读理解,不宜太多,也不能太少(一般 ...

  5. postgresql数据库用户名密码验证失败

    问题分析 (1)检查环境变量中是否指定了相关参数,比如: #export PGUSER=highgo#export PGDATABASE=highgo#export PGHOST=localhost# ...

  6. [leetcode]Edit Distance @ Python

    原题地址:https://oj.leetcode.com/problems/edit-distance/ 题意: Given two words word1 and word2, find the m ...

  7. jquery实现上传文件大小类型的验证

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Hadoop家族学习路线、实践案例

    作者:Han Hsiao链接:https://www.zhihu.com/question/19795366/answer/24524910来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商 ...

  9. Druid连接池简介和配置

    Druid是什么?有什么作用?  Druid首先是一个数据库连接池,但它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库,一个SQL Parser. Druid ...

  10. laravel中的自定义函数的加载和第三方扩展库加载

    l 1. 创建文件 app/Helpers/functions.php <?php // 示例函数 function foo() { return "foo"; } 2. 修 ...