JavaScript28jQuery实战Word格式文档下载.docx

JavaScript28jQuery实战Word格式文档下载.docx

《JavaScript28jQuery实战Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《JavaScript28jQuery实战Word格式文档下载.docx（9页珍藏版）》请在冰豆网上搜索。

兼容IE6+、完美支持移动端、图表类型丰富、方便快捷的HTML5交互性图表库。

官网地址：

如何学习highcharts：

Highcharts的配置（或者说Highcharts代码）是一个`JSON字符串，类似于``{chart:

{type:

“spline”}}```，JSON具有易于人阅读和编写的特点，所以学习和开发Highcharts并不难，只是熟悉API程度的问题。

所以本教程的重点是带大家熟悉API文档加一点点处理技巧，更多的是靠大家花时间学习和实践。

图表类型：

、line：

直线图、spline：

曲线图、area：

面积图、areaspline：

曲线面积图、arearange：

面积范围图、areasplinerange：

曲线面积范围图、column：

柱状图、columnrange：

柱状范围图、bar：

条形图、pie：

饼图、scatter：

散点图、boxplot：

箱线图、bubble：

气泡图、errorbar：

误差线图、funnel：

漏斗图、gauge：

仪表图、waterfall：

瀑布图、polar：

雷达图、pyramid：

金字塔。

图表的主要组成：

一般情况下，Highcharts包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。

标题（Title）：

图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。

坐标轴（Axis）：

坐标轴，包含x轴（xAxis）和y轴（yAxis）。

通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。

多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。

数据列（Series）：

数据列。

图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。

数据提示框（Tooltip）：

数据提示框。

当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。

数据提示框内提示的信息完全可以通过格式化函数动态指定。

图例（Legend）：

图例。

用不同形状、颜色、文字等标示不同数据列，通过点击标示可以显示或隐藏该数据列。

版权标签（Credits）：

图表版权信息。

显示在图表右下方的包含链接的文字，默认是Highcharts官网地址。

通过指定credits.enabled=false即可不显示该信息。

导出功能（Exporting）：

导出功能按钮。

通过引入exporting.js即可增加图表导出为常见文件功能。

标示线（PlotLines）：

标示线（或辅助线）。

可以在图表上增加一条标示线，比如平均值线，最高值线等。

标示区（PlotBands）：

标示区域（分辨带）。

可以在图表添加不同颜色的区域带，标示出明显的范围区域。

创建基础条形图案例：

jqueryui介绍

jQueryUI是建立在jQuery库上的一组用户界面交互、特效、小部件及主题。

无论您是创建高度交互的Web应用程序还是仅仅向窗体控件添加一个日期选择器，jQueryUI都是一个完美的选择。

3：

Autocomplete插件

4：

Draggable插件

5：

Datepicker插件

基本：

动画：

显示按钮：

更改年份月份：

6：

Dialog插件

基本的对话框：

基本的模态框：

确认模态框：

ssssssssssssssss

综合应用：

1：

选择日期框。

弹出框。