使用jqPlot创建JavaScript图表指南

3星 · 超过75%的资源需积分: 10 42 浏览量更新于2024-07-23 收藏 19.23MB PDF 举报

"Apress.Beginning.JavaScript.Charts.Dec.2013" 本书是一本关于JavaScript图表绘制的入门教程，适合对JavaScript有一定基础并希望学习如何利用JavaScript创建各种图表的读者。作者通过深入浅出的方式介绍了JavaScript图表技术的概述、jQuery基础知识以及一系列使用jqPlot库创建不同类型的图表的方法。在"Charting Technology Overview"一章中，作者可能讨论了图表在Web开发中的重要性，以及使用JavaScript进行动态图表创建的优势。读者可以了解到各种图表类型（如线图、柱状图、饼图）的基本概念，并可能探讨了不同的图表库及其特性。 "jQuery Basics"章节则为那些不熟悉jQuery的读者提供了基础指导，内容可能包括jQuery的选择器、事件处理、DOM操作等，这些都是创建交互式图表所必需的基础知识。 "Simple HTML Tables"章节可能涉及如何将数据组织成HTML表格，这是创建图表前的数据准备步骤。读者会学习到如何有效地展示数据，以及如何从HTML表格中提取数据用于图表生成。 "Drawing a Line Chart"、"Drawing a Bar Chart"和"Drawing a Pie Chart"分别介绍了线图、柱状图和饼图的创建方法，可能包含了一系列示例代码和步骤，帮助读者逐步理解图表的绘制过程。 "Creating a Library for Simple Charts"章节则可能讲解了如何构建一个简单的图表库，让读者理解图表库的工作原理，从而更好地使用和定制现有的图表库。 "Introducing jqPlot"章节标志着本书开始深入jqPlot库的使用，jqPlot是一个强大的JavaScript图表库，支持多种图表类型。这一章可能会介绍如何安装和设置jqPlot，以及它提供的基本功能。接下来的章节，如"Line Charts with jqPlot"、"Bar Charts with jqPlot"、"Pie Charts and Donut Charts with jqPlot"、"Candlestick Charts with jqPlot"、"Scatter Charts and Bubble Charts with jqPlot"和"Funnel Charts with jqPlot"详细讲解了如何使用jqPlot创建各种复杂图表，包括线图、柱状图、饼图、蜡烛图、散点图、气泡图和漏斗图。 "Adding Controls to Charts"章节讨论了如何为图表添加交互控制，比如缩放、平移、工具提示等，提高用户体验。最后，"Embedding jqPlot Charts in jQuery Widgets"章节则教授如何将jqPlot图表嵌入到jQuery小部件中，实现更高级的用户界面集成。通过这本书，读者不仅可以掌握JavaScript图表绘制的基本技能，还能了解和运用jqPlot库来创建多样化的交互式图表，提升Web应用的可视化效果。

CHAPTER 1 ■ CHARTING TECHNOLOGY OVERVIEW

For those who prefer not to install too many applications on their computer, there are online JavaScript IDEs.

These allow users to edit JavaScript code in a web page working as an IDE and to check their result directly from the

same web page. Unfortunately, many of these IDEs charge a fee. However, jsFiddle (http://jsfiddle.net) is an

online IDE that requires no payment and that, in addition to editing, provides code sharing and the option of adding

libraries, such as jQuery and D3.(see Figure 1-13).

jsFiddle can prove very useful. As well as letting the user include many JavaScript libraries (see Figure 1-14), it

offers the respective different versions released, thus allowing him or her to test any incompatibilities in real time.

Figure 1-13. The online IDE jsFiddle

CHAPTER 1 ■ CHARTING TECHNOLOGY OVERVIEW

If the JavaScript code resides in an external file, then it will be necessary to include it in the HTML page, writing

Therefore, as long as the execution of JavaScript is not required for the purpose of installing something, you have

everything you need. Who does not have a web browser on his or her operating system?

Data Types in JavaScript

As mentioned earlier, this book will neither explain the rules and syntax for the programming of good JavaScript code

nor will it linger too long on programming details. Nevertheless, the code that we are going to develop is centered

on charts, or rather the processing of data and how to display them. Let us start with the simplest case. The smallest

building block of all data structures is the variable (when it contains a single value). In handling the types of data,

JavaScript is very different from other programming languages. , You do not have to specify the type of value (int,

string, float, boolean, and so on) when you want to store JavaScript in a variable; you need only define it with the var

keyword.

In Java or C a variable containing an integer value is declared differently from one containing a text:

int value = 3;

String text = "This is a string value";

In JavaScript the type of stored value does not matter. Everything is declared with var, so the same declarations are

var value = 3;

var text = "This is a string value";

Thus, in JavaScript we can think of variables as containers for storing any type of value.

For the sake of simplicity, here the variables are seen as containers of a single value, thus representing the

simplest data structure. Actually, however, variables may also contain types of data that are more complex: arrays and

objects.

Note ■ The use of variables in JavaScript is actually a bit more complicated. You can also use a variable without ever

declaring it with the var keyword. The var keyword will declare the variable within the current scope. If var is missing,

JavaScript will search for a variable with the same name declared at an upper level of scope. If JavaScript does not find

this variable, a new one is declared; otherwise, JavaScript will use the values in the variable found. As a result, an

incorrect use of variables can sometimes lead to errors that are difficult to detect.

Arrays

An array is a sequence of values separated by a comma and enclosed in square brackets [ ]:

var array = [ 1, 6, 3, 8, 2, 4 ];

CHAPTER 1 ■ CHARTING TECHNOLOGY OVERVIEW

Arrays are the simplest and most widely used data structure in JavaScript, so you should become very familiar

with them. It is possible to access any value in an array by specifying its index (position in the array) in the brackets,

immediately following the name of the array. In JavaScript the indexes start from 0:

array[3] //returns 8

Arrays can contain any type of data, not just integers:

var fruits = [ "banana", "apple", "peach" ];

There are a many functions that can help us handle this kind of object. Because of its usefulness, I will be using

this object frequently throughout the book, and it therefore seems proper to give it a quick look.

It is possible to know the number of the values in an array by writing

fruits.length //returns 3

Or, if you know the values, you can get the corresponding index with

fruits.indexOf("apple") //returns 1

Moreover, there is a set of functions that allow us to add and remove items in an array. push( ) and pop( )

functions add and remove the last element in an array, whereas shift( ) and unshift( ) functions add and remove the

first element in an array:

fruits.push("strawberry");

// Now the array is [ "banana", "apple", "peach", "strawberry" ];

fruits.pop(); //returns "strawberry"

// Now the array is [ "banana", "apple", "peach"];

fruits.unshift("orange", "pear");

// Now the array is ["orange", "pear", "banana", "apple", "peach"];

fruits.shift(); //returns "orange"

// Now the array is ["pear", "banana", "apple", "peach"];

Sometimes, it is necessary to make a loop through every value in an array in order to perform some action with

it. An approach that is widely used in other programming languages is the use of the function for(). For example, to

calculate the sum of the values in an array, you would write

var sum = 0;

for (var i = 0; i < array.length; i++) {

sum += array[i];

}

But, in JavaScript it is more common to use the forEach() function, where d assumes the values in the array, one

by one, following the sequence:

var sum = 0;

array.forEach(function(d) {

sum += d;

});

剩余601页未读，继续阅读

heilee88

粉丝: 0
资源: 58

使用jqPlot创建JavaScript图表指南

Apress.Beginning.HTML5.Games.with.CreateJS

Apress.Beginning.PhoneGap.Mobile.Web.Framework.for.JavaScript.and.HTML5.2012

Apress.Pro.Visual.C.plus.plus.CLI.and.the.dot.NET.2.0.Platform.Dec.2005.rar

javascript相关外文文献

关于springboot的英文文献

帮我找一下可以写再javaweb毕设里的英文参考文献

列举几个SpringBoot相关的技术文献,以文献引用的格式展示

spring boot项目英文文献

springboot的参考文献

springboot框架外文参考文献列表

最新资源