最近一个项目,用到了图表,找了不少,发现Highcharts 这个纯js的图表插件很是好用,功能强大。作个笔记,备用。spa
基本构成,见图:插件
在上图中,显示了作图表时最常配置的几个项目:blog
xAxis | X坐标 |
yAxis | y坐标 |
Credits | 版权信息 |
legend | 图例 |
exporting | 导出选项 |
Title | 标题 |
tooltip | tip提示 |
Series | 图表上一个或多个数据系列,好比图表中的一条曲线,一个柱形 |
英文名 | 中文名 |
---|---|
line | 直线图 |
spline | 曲线图 |
area | 面积图 |
areaspline | 曲线面积图 |
arearange | 面积范围图 |
areasplinerange | 曲线面积范围图 |
column | 柱状图 |
columnrange | 柱状范围图 |
bar | 条形图 |
pie | 饼图 |
scatter | 散点图 |
boxplot | 箱线图 |
bubble | 气泡图 |
errorbar | 偏差线图 |
funnel | 漏斗图 |
gauge | 仪表图 |
waterfall | 瀑布图 |
polar | 雷达图 |
pyramid | 金字塔 |
经常使用的图表类型大概是:line,pie,bar,column几种了。ip
配置基本代码:it
var chart = new Highcharts.Chart({
chart: {}, //图表全局选项io
title: {},table
subtitle: {},
xAxis: {}, //x坐标
yAxis: {},//y坐标class
tooltip: {},//tip提示
plotOptions: { },// 图表区域的设置
legend: {},//图例
credits: {},//版权商标
series: [{}] // 图表数据列Highcharts
});配置