一、准备工作

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

官网下载笔者选择的是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. iCOM组件(iComponent,应用或学习组件)

    iCOM(英文全称:i + component,应用或学习组件,或iCOM组件),为学习资源的一种表现形式,是面向不同类型的学习对象(某一知识点或某一类知识点,如词汇.句子)专门开发的.在外部可重用的 ...

  2. Swift3.0:PhotoKit的使用

    一.介绍 iOS8之前使用AssetsLibrary来获取相册资源,iOS新引入框架PhotoKit框架,也即Photos.framework 二.PhotoKit的基本构成包括如下几项: PHAss ...

  3. iOS开发调试篇—Print Description of "string"

    Print Description of "string":把 string 的信息输出到控制台.Copy:复制 string 的信息,包含变量名,类名和值.View Value ...

  4. iOS开发-UITableView自定义Cell

    UITableView在iOS中开发的重要地位是毋庸置疑的,基本上应用中用到的比例是一半左右,而且大部分情况都是需要自定义单元格的,这样用户看到的App才能更有美感.之前写过UITableView的基 ...

  5. set练习

    #include <iostream> #include <set> #include <vector> using namespace std; int main ...

  6. python用post访问restful服务接口

    具体代码如下: import requests import json data={"]} url="http://XXXXX" data_json = json.dum ...

  7. css文件放在根目录之后不起作用原因

    修改为

  8. 解析oui.txt文件,通过MAC前缀获取Organization

    1.前言 OUI是指Organizationally unique identifier  (组织唯一标识符),签发给各类组织的唯一标识符.MAC地址共有6个字节48位组成,前3个字节体现了OUI,其 ...

  9. Kafka:ZK+Kafka+Spark Streaming集群环境搭建(五)针对hadoop2.9.0启动之后发现slave上正常启动了DataNode,DataManager,但是过了几秒后发现DataNode被关闭

    启动之后发现slave上正常启动了DataNode,DataManager,但是过了几秒后发现DataNode被关闭 以slave1上错误日期为例查看错误信息: /logs/hadoop-spark- ...

  10. NSProxy

    NSProxy类在分布式对象架构中是很重要的.由于作用比较特别,NSProxy在Cocoa程序中出现频率很低. NSProxy 是一个抽象类,它为一些表现的像是其它对象替身或者并不存在的对象定义一套A ...