Highcharts图表学习随便(一)

Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表。

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。

一、图表配置:

1、图表容器:

Highcharts 实例化中绑定容器的方式有很多种方式,这里列举三种:

1、通过构造函数

var charts = Highcharts.chart('container', {
  // Highcharts 配置
});

2、或者通过 chart.renderTo 来指定

var charts = Highcharts.chart({
    // Highcharts 配置
    chart : {
        renderTo : 'container'  // 或 document.getElementById('container')
    }
}); 

3、如果你的页面已经引入了 jQuery,那么还可以 jQuery 插件的形式调用

$("#container").highcharts({
    // Highcharts 配置  
}); 

图表组成:

1. 标题(Title)

图表标题,包含标题和副标题(subTitle),其中副标题是非必须的。

2. 坐标轴(Axis)

坐标轴包含x轴(xAxis)和y轴(yAxis)。通常情况下,x轴显示在图表的底部,y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴,为了对比或区分数据,Highcharts提供了多轴的支持。

3. 数据列(Series)

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

4. 数据提示框(Tooltip)

当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。

5. 图例(Legend)

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

6. 版权标签(Credits)

显示在图表右下方的包含链接的文字,默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。

7. 导出功能(Exporting)

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

8. 标示线(PlotLines)

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

9. 标示区(PlotBands)

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

猜你喜欢

转载自www.cnblogs.com/--cainiao/p/9122025.html