首页 > 其他分享 >Highcharts-Stock 的技术指标配置​

Highcharts-Stock 的技术指标配置​

时间:2023-12-25 15:33:37浏览次数:32  
标签:linkedTo series Highcharts params main 数据 技术指标 Stock

需求

技术指标是用来更好的查看股票数据及做决策的强大工具,一般是基于现有股票数据按照一定的数学公式进行运算,从而创建股价边界或走势,方便做分析和决策。

技术指标相关的功能是以数据列的形式实现的,这也就意味着大部分数据列配置 也可以在技术指标中使用,唯一需要注意的是技术指标数据列是以主数据列的数据进行计算的,所以无需给定数据配置,直接用 linkedTo 属性来与主数据进行关联,当主数据列的数据有更新时(例如进行 addPoint 操作),技术指标也会同步更新。

分析与解决

Highstock 自 6.0 开始内置提供 20 种常用的技术指标,使用它们非常方便,只需要额外的引入技术指标主文件( indicators/indicators.js,也是

<!-- 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>

另外某些技术指标还有一些特有的配置,这些配置是写在params 配置下,例如 params.period (周期)、params.algorithm(算法)等。

同一个主数据列可以关联多个技术指标,下面的包含一个主数据列、2个 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
 }
}]

效果图:

Highcharts-Stock 的技术指标配置​_主文件


Highcharts还提供了丰富的配置选项,可以自定义图表的外观和交互效果,以满足不同的需求。

希望这些信息对大家有所帮助!如果您有任何其他问题,请随时提问。

标签:linkedTo,series,Highcharts,params,main,数据,技术指标,Stock
From: https://blog.51cto.com/u_15674553/8969110

相关文章

  • HighCharts 基础股票图
    需求:将基本图表转换为股票图表。修改库存的基本元素。注意范围的位置选择器、按钮数量、内容、初始选择和外观。同时定位菜单和标题。自定义底部的导航。分析:基本图表转换股票图表使用Highcharts.stockChart转换,修改库存基本元素stockTools解决定位菜单标题使用相关属性设定具体请......
  • HighCharts 以轴标签为标签+蓝色圆圈跟随鼠标移动
    需求:画一个蓝色圆圈跟随鼠标移动,点击图表并保存这个点,点的右侧有以轴标签为标签的标签分析:调用load事件,使用renderer画个圆圈跟随鼠标,点击图标保存点用click事件,在click事件里使用renderer画一个圆和标签,标签以轴为单位解决:源代码:示例:HighCharts以轴标签为标签及蓝色圆圈跟随鼠......
  • Highcharts 用SVGRenderer方法点击鼠标移动光标​
    需求演示如何使用SVGRenderer方法来实现点击鼠标移动光标,并解释说明属性功能。分析使用SVGRenderer方法来实现点击鼠标移动光标,可以按照以下步骤进行操作:创建SVGRenderer实例:首先,你需要创建一个SVGRenderer实例,用于渲染SVG元素和操作SVG属性。设置SVG元素属性:使用SVGRenderer的方法......
  • Highcharts 用SVGRenderer方法使柱状图连接列边​
    需求在Highcharts中,可以使用SVGRenderer方法来创建路径连接柱状图的列边,并根据具体的数据和需求进行适当的调整和扩展。分析要使用Highcharts的SVGRenderer方法来绘制柱状图并连接列边,可以按照以下步骤进行操作:创建柱状图:使用Highcharts的 chart 方法创建一个柱状图,并......
  • Highcharts 使用SVGRenderer方法绘制极地图​
    需求展示如何创建一个极地图、设置样式,并使用SVGRenderer方法绘制解释说明的路径和文本。分析要使用Highcharts的SVGRenderer方法绘制极地图,可以按照以下步骤操作:首先,创建一个极地图实例,并设置所需的配置项;创建一个SVGRenderer实例,使用SVGRenderer的path方法绘制路径;可以......
  • Highcharts 3D漏斗图和3D金字塔图​
    需求Highcharts中的3D漏斗图和3D金字塔图可以用来展示数据的层级关系或者比例关系。漏斗图通常用来表示销售过程中各个阶段的转化率,如潜在客户、意向客户、成交客户等;金字塔图通常用来表示一种由大到小或者由小到大的层级关系,比如人口统计数据中的年龄结构、组织结构中的岗位层级等......
  • Highcharts饼图的主要属性和网格线属性​
    需求在Highcharts中,需要更改图表里的网格线如何去完成;在Highcharts中,你可以通过设置不同的属性来自定义你的饼图,饼图的属性于其他图表存在差别。分析饼图属性:legend.enabled:控制图例的显示与隐藏。设置为false则隐藏图例,默认为true。legend.layout:设置图例的布局方式。可......
  • HighCharts 极地图图表绘制及添加标示线+柱状图找最值
    需求:绘制极地图并给极地图图表加上标示线,在柱状图中找出最值分析:图表加上标示线在需要的轴上面用plotLines(标示线)属性来进行添加,极地图则是在chart(图表)属性里开启polar(极)属性然后进行绘制,找出最值需要在plotOptions属性里进行修改解决:源代码:示例:标示线总是垂直于它属于的轴。......
  • Highcharts 人口金字塔和对数折线图​
    需求人口金字塔是一种用来描述和展示人口结构的图表,可以通过设置数据源、坐标轴样式、图例等参数来自定义图表的外观和行为;对数折线图通常用于显示数据的指数增长或减少,以及数据之间的相对比较。分析柱状图人口金字塔:通过(categories)指定了过(data)指定了男性和女性在每个年龄段的数据......
  • HighCharts 修改版权标识+面积图堆叠及断裂
    要使用Higcharts最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。兼容IE6+、完美支持移动端、图表类型丰富的HTML5交互图表|Highcharts需求:修改图表右下角的版权标识,生成一个堆叠面积图和一个断裂面积图分析:修改版权标识用credits来进行修改,生成堆叠面积图和堆叠......