一、准备工作

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

官网下载笔者选择的是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.canvasTextRenderer.js"></script>
<script src="js/jqplot.canvasAxisLabelRenderer.js"></script>

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

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

二、正文

下面我们接着上节的知识继续学习,上节我们学习了简单的折线图等等,同时还学习了有关如何说明X和Y轴的方式,下面我们将演示默认情况下轴说明的形式,结果如图1.1:

         $(function () {
var cosPoints = [];
for (var i = 0; i < 2 * Math.PI; i += 0.1) {
cosPoints.push([i, Math.cos(i)]);
}
$.jqplot("chart", [cosPoints], {
series: [{ showMarker: false }],
axes: {
xaxis: {
label: "Angle(radians)"
},
yaxis: {
label: "Cosine"
}
}
});
});

这里唯一需要说明的就是showMarker属性,当设置这个属性为false后原本的折线图中存在的节点就会消失,从而变成单一的线条。

图1.1

上节我们介绍了如何设置所有轴说明的文字的引擎,而下面我们将介绍如何单一的指定某个轴的说明文字的引擎,通过如下代码将可以看到图1.2所示的效果:

         $(function () {
var cosPoints = [];
for (var i = 0; i < 2 * Math.PI; i += 0.1) {
cosPoints.push([i, Math.cos(i)]);
}
$.jqplot("chart", [cosPoints], {
series: [{ showMarker: false }],
axes: {
xaxis: {
label: "Angle(radians)",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis: {
label: "Cosine",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
});

我们可以看到原本在axesDefaults里设置的属性也可以在axes下对应方向的轴中也一样可以设置的。

图1.2

当然除了这些我们还可以通过labelOptions设置更详细的字体和字体大小属性,通过下面的代码我们将可以修改字体和字体大小,通过图1.3可以看到最后的效果,如果是在不兼容canvas的浏览器下是不起作用的:

         $(function () {
var cosPoints = [];
for (var i = 0; i < 2 * Math.PI; i += 0.1) {
cosPoints.push([i, Math.cos(i)]);
}
$.jqplot("chart", [cosPoints], {
series: [{ showMarker: false }],
axes: {
xaxis: {
label: "Angle(radians)",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'Georgia, Serif',
fontSize: '12pt'
}
},
yaxis: {
label: "Cosine",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'Georgia, Serif',
fontSize: '12pt'
}
}
}
});
});

图1.3

jqPlot图表插件学习之轴说明和label属性的更多相关文章

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

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

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

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

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

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

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

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

  5. jqPlot图表插件学习之数据节点高亮和光标提示

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

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

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

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

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

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

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

  9. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

随机推荐

  1. Java生成8位随机邀请码,不重复

    public static String[] chars = new String[] { "a", "b", "c", "d&q ...

  2. LaTeX技巧205:使用split输入多行公式技巧

    我们在输入多行公式的时候,split,array,multiline,align,aligned等等都是我们可以选用的环境,这里介绍split的使用方法.演示效果图: 演示代码:\documentcl ...

  3. KOL:Key Opinion Leader

    什么是关键意见领袖 在营销学上,为各厂家宣传的专家或权威被称为“关键意见领袖(Key Opinion Leader),通常被定义为:拥有更多.更准确的产品信息,且为相关群体所接受或信任,并对该群体的购 ...

  4. [转]PHP: 深入pack/unpack

    From : http://my.oschina.net/goal/blog/195749 http://www.w3school.com.cn/php/func_misc_pack.asp PHP作 ...

  5. 利用Microsoft.Exchange.WebServices处理Office365邮件的几个属性

    使用Microsoft.Exchange.WebServices可以很方便操作Office365邮件.这里列出几个重要的属性. 通常,代码里会先定义一个WebServices对象 ExchangeSe ...

  6. Reader 与 Guava MultiReader

    Reader是Java IO体系里字符处理读取流的基本类,代码如下 /* * %W% %E% * * Copyright (c) 2006, Oracle and/or its affiliates. ...

  7. java的反射机制浅谈(转)

    原文链接:java的反射机制浅谈 一.java的反射机制浅谈 1.何谓反射机制 根据网文,java中的反射机制可以如此定义: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性 ...

  8. Win2008建立域时administrator账户密码不符合要求

    在win2008中建立域时,有时会出现administrator账户密码不符合要求的现象,报错会说明目前本地administrator账户不需要密码.这是什么原因造成的呢?原来,目前的2008镜像在网 ...

  9. The Art of Deception

    前言 一些黑客毁坏别人的文件甚至整个硬盘,他们被称为电脑狂人(crackers)或计算机破坏者(vandals).另一些新手省去学习技术的麻烦,直接下载黑客工具侵入别人的计算机,这些人被称为脚本小子( ...

  10. go语言之进阶篇 channel介绍

    1.channel介绍 和map类似,channel也一个对应make创建的底层数据结构的引用. 当我们复制一个channel或用于函数参数传递时,我们只是拷贝了一个channel引用,因此调用者何被 ...