HighCharts使用总结

1、常用属性

chart:
type:areaspline(线面图)、arearange(区间图)
zoomType: 缩放类型(沿着‘xy‘轴缩放)
alignTicks:设置坐标轴刻度对齐。 当有多个坐标轴时,设置坐标轴刻度的对其方式(通过自动计算还是不需要计算)。

color: ‘rgba(68, 170, 213, 0.1)‘ 颜色的透明色设置

style:CSS样式
设置文字颜色、字体、字号,但是字体的对齐则使用algin、x和y元素。比如: { "color": "#333333", "fontSize": "18px" }

Axis(x轴和y轴):
type:轴类型 (datetime,日期时间)
gridLineWidth:网格线的粗细
alternateGridColor:网格之间的过度填充色
plotBands:区间带(比如1.5至3.5之间是什么颜色)
tickInterval: 标记间隔(7 * 24 * 3600 * 1000, // 一周)
minRange:最小区间 (14 * 24 * 3600000 // 14天)
opposite:是否对立面显示坐标轴,比如图表双轴的时候

plotOptions:用来设置所有数据序列的公共对象。
series.cursor:鼠标类型
series.point.events.:鼠标点事件
spline.pointInterval:3600000 点位间隔(毫秒,一小时)
area:设置图形区域的渐变颜色
pie.size:圆形图和环形图相对于图表区的大小,做小的“圆形图和环形图”的时候可以用到。
marker:数据的标记点

tooltip:提示窗
valueSuffix:单位后缀
shared: true (多数据序列是否共享提示窗)
headerFormat: 提示框中标题行的HTML代码,默认值(<span style="font-size: 10px">{point.key}</span><br/>)。变量被花括号包起来。可用的变量有point.key, series.name, series.color和其它从点对象point和series 对象中的成员。
pointFormat:提示框中该点的HTML代码,默认值 <span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>.
footerFormat: 字符串形式定义提示框中的注脚格式。
useHTML:是否用HTML取代svg展示ToolTip标签。

实例:tooltip: {
borderColor: ‘#0000AA‘,
//headerFormat: ‘<span style="font-size:10px">{point.key}</span><table>‘,
//pointFormat: ‘<tr><td style="padding:0">{series.name}: </td>‘ +
//‘<td style="padding:0"><b>{point.y:.1f} kWh</b></td></tr>‘,
//footerFormat: ‘</table>‘,
//useHTML: true,
valueDecimals:2,
shared: true,
valueSuffix: ‘kWh‘
},

series:数据序列
dashStyle: ‘shortdot‘ (虚线)
marker:数据标记点

legend:图例
layout:垂直图例还是水平图例
borderWidth:边框线
backgroundColor:背景颜色
align:水平位置
verticalAlign:垂直位置

2、HightChart

3、HighStock
上下多坐标轴: [{labels: {align: ‘right‘,
x: -3
},
title: {
text: ‘温度(℃)‘
},
height: ‘30%‘,
lineWidth: 2
}, {
labels: {
align: ‘right‘,
x: -3
},
title: {
text: ‘湿度(%)‘
},
top: ‘35%‘,
height: ‘30%‘,
offset: 0,
lineWidth: 2
}, {
labels: {
align: ‘right‘,
x: -3
},
title: {
text: ‘照度(Lux)‘
},
top: ‘70%‘,
height: ‘30%‘,
offset: 0,
lineWidth: 2
}]

4、Highmap
实例地址:http://jsfiddle.net/tfxudL9z/3/
做世界地图等,可以使用内置的地图或GeoJSON,而自定义地图分为以下几个步骤。
(1)制作svg文件,可以使用“SVGDeveloper”。
(2)http://www.highcharts.com/studies/map-from-svg.htm#http://www.highcharts.com/maps/maps/test.svg 通过这个网址,将 svg文件转化为 highmap支持的json文件。
(3)用Highmap载入json文件,显示地图。

5、Treemap
数据节点父子关系,可以设置向下钻取也可以不设置。
allowDrillToNode:是否向下钻取

虽然还有其它很多图表插件,比如:echarts、fusioncharts、kcharts等。 但是,还是感觉Highcharts的渲染效果比较好,看起来漂亮。  有一点不好,就是灵活性大,官方的参考实例比较少,文档看英文有点费劲。

时间: 2024-07-29 04:02:25

HighCharts使用总结的相关文章

Highcharts(一)

由来 2014年10月27日,我入职了我现在的这家公司,也是我第一家公司.到今天已经快3个月了,虽然这家公司规模不小,但是IT部的规模很小.到目前为止,整个部门17人,包括运维和开发.我们的项目组叫”MD”项目组,整个团队5个人.刚进公司简单的熟悉业务后,老大安排我负责系统服务端的接口.简单的说就是前端需要什么样的数据,我就给它提供相应的接口.就这样,写了1个多月的接口.由于系统需求,需要系统提供曲线图.老大让我到网上找一个控件学习一下,解决这个需求.这就是我学习Highcharts的由来. 介

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式.其中最简单直接,形象明了的就是用图表说明问题了. 如果在以前,要实现各种图表,可能很多人会选择flash.但是flash成本较高,图表多的时候很耗性能.后来越来越多的纯js框架出现,让大家有了更多的选择.所以接下来我想推荐几个不错的图表js框架给大家用.

[转] angular2+highcharts+chart.js

这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightcharts npm install highcharts --save typings install dt~highcharts --global --save 2.编辑 html文件在html中添加一个div来显示图表 <ion-content class="about"> <

Highcharts简单入门

一.简介 Hicharts是一款支持移动端.图表类型丰富.方便快捷的 HTML5 交互性图表库,旨在让数据可视化更简单. 下面是一个简单的折线图,交互体验很棒. 二.如何使用? 1.官网下载压缩包 2.将js文件夹下复制到工程中 3.页面引入三个js文件 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text

HighCharts插件学习(二)

HighCharts属性 credits: {版权信息} data: {数据功能模块} drilldown: {钻取} exporting: {导出} labels: {标签} legend: {图例} loading: {加载} navigation: {导航} noData: {没有数据} pane: {-} plotOptions: {数据列配置} responsive: {响应式} series: [{数据列}] subtitle: {副标题} title: {标题} tooltip:

HighCharts学习笔记(一)

HighChars基本概述 Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求. 开始使用chart之前进行配置 全局配置: Highcharts.setOptions({ global: { useUTC: false }}); 主配置中参数含义: $("#container").highcharts({ accessibility:无障碍的设计{ describeSingleSeries: false enabled: true keyboardNav

HighCharts 详细使用及API文档说明

HighCharts 详细使用及API文档说明 2012-11-19 11:18 49574人阅读 评论(2) 收藏 举报  分类: HighCharts 一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等.下图为整个图表的每个部分位置说明(请对照下面HighCharts整体结构) 二.HighCha

Highcharts 环境配置

Highcharts 环境配置 本章节我们将为大家介绍如何在网页中使用 Highcharts. Highcharts 依赖于 jQuery,所以在加载 Highcharts 前必须先加载 jQuery 库. 如果你对 jQuery 不熟悉,可以参阅本站的jQuery 教程. 安装 jQuery jQuery 安装可以使用以下两种方式: 1.访问 jquery.com 下载jQuery包. 2.使用本站静态资源库的jQuery资源: http://cdn.static.runoob.com/lib

在asp.net中如何自己编写highcharts图表导出到自己的服务器上来

1.准备工作:网上下载highcharts导出的关键dll.      1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图:      2).itextsharp.dll:这样主要是用于处理和提取highcharts图表内的文字以及编码问题: 2.创建一个简单asp.net项目,并把上述两个程序集引入到项目中,OK.3.给出页面代码: <%@ Page Language="C#" AutoEventWireup="true&qu

基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您