`

HighCharts使用之一:基础配置

阅读更多
在需要使用图表的页面引入highcharts.js文件,但是在这之前需要先引入jq文件、版本必须高于1.6.4版本(在官网的demo页面可以看到,还支持其它很多js类库)

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/highcharts.js"></script>
series对象,可以放置有多个属性对象、每个属性对象用{}包含并用“,”隔开可以设置多个属性:

series: [{对象1},{对象2},{...}]

每个对象均可设置多个属性。series最常用的属性有
属性名称 说明 类型
data 用于绘制图像的数据 Array
name 控制series的显示名称 String
type 图表的类型、类型有ploatOption String

其中data,name,type这些属性你可以通过ajax或者其它的方式传入。这样就可以很方便的动态统计。比如你要根据条件查询统计、这样就会非常方便。如果需要在一张图上有多种类型的统计也会出现一些小问题、比如上图的。饼状图将线形图的部分节点挡住了。
下面我们以Line图为例子、再介绍一些其它的方法的使用。

方法 描述 注明
remove() 用于移除指定位置的series,remove()例子  
hide() 用于隐藏指定的series,hide()例子  Show()也一样
select() 用于选中某个series,select()例子   需要设置series的showCheckbox属性 (True/Flase)
setData() 用于重设series的值,setData()例子 参数对象和data相同,最重要的
update() 用于更新series的各种属性,update()例子 参数为一个需要更新的对象

官方网站:http://www.highcharts.com/demo
分享到:
评论

相关推荐

    零基础highcharts生成报表-简单应用 .

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的互动图表,如折线图、柱状图、饼图、散点图等,用于数据...在实际项目中,Highcharts的灵活性和强大功能使其成为数据可视化的首选工具之一。

    highcharts和highstock的资料

    在实际使用中,开发者通常会参考Highcharts和Highstock的API文档来获取详细的函数用法、配置选项以及示例代码。例如,`highstock API`文档中包含了如何创建图表、设置图表选项、处理数据加载等所有必要的信息。通过...

    highcharts4.1.8

    首先,Highcharts的API是其核心功能之一,它提供了丰富的函数和配置选项,使得开发者能够定制各种图表的外观和行为。例如,`Highcharts.chart()`是创建图表的主要方法,需要传入一个容器ID和一个配置对象。配置对象...

    JQuery Highcharts图表使用说明

    该库不仅对个人用户免费,而且使用简单,不需要深厚的编程基础,只需通过设置选项就能轻松定制图表。此外,Highcharts 支持多种编程语言环境,如 PHP、Asp.net 和 Java,这使得不同技术栈的开发者都能方便地集成。 ...

    Highcharts-Maps-8.1.2.zip

    Highmaps 最重要的特点之一就是:无论免费版还是付费版,你都可以下载源码并可以对其进行编辑。 基于开源社区我们可以第一时间获取用户的需求、及时的 Bug 修复及吸收社区贡献。 no-backend纯 JavaScript Highmaps...

    highcharts中文文档

    `chart` 选项是Highcharts中最基础且重要的配置项之一,用于控制图表的基本外观和行为。具体参数包括: - **`alignTicks`: Boolean** - 是否对齐轴上的刻度。 - **`animation`: Boolean | Object** - 设置图表的...

    highcharts 各种图表

    1. 曲线图(Line Chart):曲线图是最常见的图表类型之一,用于展示数据随时间的变化趋势。在Highcharts中,你可以通过配置x轴和y轴的数据,以及线条样式、颜色和宽度来定制你的曲线图。此外,还可以添加数据点标记...

    Highcharts_强大的jQuery图表制作功能

    虽然免费版本可能会包含官方的水印链接,但这并不妨碍其成为市场上最受欢迎的图表库之一。通过简单的定制和配置,Highcharts可以满足不同场景下的需求,无论是数据可视化项目还是实时监控系统。

    网页报表工具Highcharts

    综上所述,Highcharts作为一款强大的网页报表工具,其强大的图表功能、良好的兼容性和易用性使其成为Web开发者的首选之一。无论是简单的数据展示还是复杂的交互需求,Highcharts都能提供满意的解决方案。

    highcharts.7z drawPicture

    1. **折线图(Line Chart)**: 折线图是最基础的图表类型之一,用于显示数据随时间变化的趋势。在Highcharts中,可以通过`series`配置项定义数据,`type`设置为'line'来创建折线图。可以添加`pointStart`和`...

    Highcharts入门之基本属性

    - 方法一:使用jQuery的文档就绪函数和Highcharts的初始化方法,如下所示: ```javascript $(function(){ $(".chart").highcharts({}); }); ``` - 方法二:直接创建一个新的Highcharts.Chart对象并传入配置...

    TutorialsPoint Excel Hadoop HighCharts Golang Hive HBase Foundation Git 教程

    学习HighCharts将包括理解各种图表类型(如折线图、柱状图、饼图)、配置选项、数据加载、事件处理和响应式设计。 **Golang**(Go语言):由Google开发的Go语言是一种静态类型的、编译型的、并发的、垃圾回收的、C-...

    jQuery插件HighCharts实现气泡图效果示例【附demo源码】

    HighCharts不仅在桌面浏览器上运行良好,还能在各种移动设备上兼容展示,这使得它成为了Web开发者在数据可视化方面的首选工具之一。HighCharts的核心功能是开源的,但是某些高级功能需要商业授权。 知识点二:气泡...

    JQuery绘图统计

    - Highcharts是一个实用的图表库,其丰富的选项和与JQuery的良好兼容性使其成为Web开发者的首选之一。 - 通过JQuery的事件处理和动态更新,我们可以创建出交互性强、适应性强的绘图统计应用。 这个压缩包可能包含...

    一步步搭建物联网系统.pdf

    * Highcharts的使用 * 实时数据的显示 知识点十三:CoAP协议 * CoAP的概念 * CoAP命令行工具的使用 * CoAP Hello World程序的编写 * CoAP数据库查询的实现 本资源提供了一个系统的物联网系统搭建指南,涵盖了多个...

    zhuzhuangtu.zip_js

    1. **数据可视化**:柱状图是数据可视化的基础图表类型之一,它通过矩形的高度或长度来表示数据的大小,使得复杂的数据变得易于理解和比较。在Web开发中,数据可视化能够帮助用户直观地理解页面上的信息。 2. **...

    深入浅析Vue组件开发

    Vue组件开发是Vue.js框架的核心特性之一,它允许开发者将应用拆分成独立可复用的模块,提升代码的可维护性和开发效率。本篇文章将详细讲解如何基于Vue进行组件开发,特别是结合流行的可视化库Highcharts进行组件化...

    python3爬虫

    - **Scrapy**: 最流行的Python爬虫框架之一,提供了丰富的功能和扩展性。 - **PySpider**: 另一款开源的分布式爬虫框架,支持异步和中间件等功能。 #### 九、分布式爬虫 - **分布式爬虫概念**: 多个节点协同工作,...

    基于Springboot核酸检查统计系统.zip

    Spring Boot以其简洁的配置、快速开发的特点,成为现代企业级应用开发的首选框架之一。下面我们将深入探讨如何利用Spring Boot搭建这样一个系统。 **1. Spring Boot基础** Spring Boot是Spring框架的一个子项目,...

    湖北省数据可视化代码

    1. **JavaScript基础**:JavaScript是一种广泛用于网页和网络应用的编程语言,它在浏览器端运行,能够与用户交互,动态更新内容,是数据可视化的首选语言之一。JS可以处理JSON数据,这通常是社交媒体平台如微博的...

Global site tag (gtag.js) - Google Analytics