Highstock 是一个基于 Highcharts 的图表库,专门用于创建股票图和时间轴图表,它提供了强大的技术指标和导航选项,可以满足复杂的数据可视化需求,以下是关于 Highstock CDN 的详细信息:
一、Highstock 简介
1、定义:Highstock 是一个基于 Highcharts 的 JavaScript 图表库,专门用于股票或一般时间线图表的创建,它支持多种图表类型,包括折线图、面积图、柱形图、散点图、蜡烛图(OHLC)等。
2、特点:
提供复杂的导航选项,如小型导航器系列、预设日期范围、日期选择器、滚动和平移。
内置多种常用的技术指标,如SMA、EMA、MACD等。
支持大数据量的时间轴图表显示。
高度可定制,可以通过丰富的配置选项自定义图表的外观和交互效果。
3、版本信息:Highstock 自 6.0 版本开始内置提供 20 种常用的技术指标。
二、Highstock CDN 使用说明
1、CDN 地址:Highstock 的 CDN 地址为http://cdn.hcharts.cn/highstock
,通过该地址可以快速加载 Highstock 的 JavaScript 文件。
2、引入方式:
引入 Highstock 主文件:
<script src="http://cdn.hcharts.cn/highstock/highstock.js"></script>
如果需要使用技术指标,还需要额外引入技术指标主文件(indicators/indicators.js)及对应的技术指标文件,例如添加 MACD 指标:
<!-Highstock 主文件 --> <script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> <!-技术指标主文件 --> <script src="http://cdn.hcharts.cn/highstock/indicators/indicators.js"></script> <!-技术指标文件,如果是 SMA,则无需引入(因为 indicators 包含 SMA) --> <script src="http://cdn.hcharts.cn/highstock/indicators/macd.js"></script>
3、示例代码:以下是一个包含一个主数据列、两个 SMA 和一个 EMA 数据列的示例代码:
series: [{ id: 'main-series', data: [] }, { type: 'sma', // 指定数据列类型(指标类型) linkedTo: 'main-series', // 通过 linkedTo 与主数据列关联 params: { // 参数 period: 14 } }, { type: 'sma', linkedTo: 'main-series', params: { period: 28 } }, { type: 'ema', linkedTo: 'main-series', params: { period: 7 } }]
三、Highstock 与其他图表库的混合使用
1、与 Highcharts 混合使用:当 Highcharts 与 Highstock 同时使用时,只需要引入 highstock.js 即可。
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="http://cdn.hcharts.cn/highstock/highstock.js"></script>
2、与 Highmaps 混合使用:如果需要同时使用 Highstock 和 Highmaps,则需要引入 highstock.js 和 map.js。
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> <script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script>
Highstock 是一个功能强大的图表库,适用于创建股票图和时间轴图表,通过使用 CDN,可以方便地引入所需的 JavaScript 文件,并快速实现图表的绘制和交互功能,在实际应用中,可以根据需求选择合适的图表类型和技术指标,以满足不同的数据可视化需求。