HQChart使用教程50-Y轴自定义刻度设置说明

已于 2023-11-17 12:51:09 修改
阅读量3.7k 收藏 1
点赞数 1
分类专栏： HQChart JavaScript 文章标签： HQChart kline K线图 股票 量化
于 2019-11-20 23:59:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jones2000/article/details/103174483
版权
HQChart 同时被 2 个专栏收录
164 篇文章 98 订阅
订阅专栏
JavaScript
151 篇文章 33 订阅
订阅专栏

HQChart使用教程50-Y轴自定义刻度设置说明

需求

有时候我们需要在主图Y轴刻度上， 增加一些自定义的刻度， 如最新价格， 或一个固定价格。

Frame 设置

通过设置Frame[0].Custom 我们可以自定义刻度

Custom

数组类型可以存放多组自定刻度信息
Type:类型
0=最新价格刻度
1=固定价格刻度(分时,K线图都支持)
2=当前屏最后一个K线收盘价刻度 （只支持K线图）
3=显示当前屏数据涨幅（只支持K线图）

var JSCHART_CUSTOM_YCOORDINATE_ID=
{
    LATEST_VALUE_ID:0,      //最新价格刻度
    FIXED_VALUE_ID:1,       //固定价格刻度
    PAGE_LAST_PRICE_ID:2,   //当前屏最后一个K线收盘价刻度
    PAGE_DATA_INCREASE:3,   //当前屏数据涨幅
    PAGE_LAST_INDEX_VALUE_ID:4,   //指标前屏最后一个数据刻度
};

Position: 文字显示位置 ‘left’,‘right’ (默认:right)
PositionEx: 1=文字绘制在坐标框架内部 （默认0)
FloatPrecision 显示小数位数，只支持K线，Type==0, 缺省跟品种的小数位数保持一致 （ver>=8742)
IsShowLine: 是否显示刻度虚线 (默认:true)
LineType 线段类型， 0=直线 2=虚线 -1=不画线 （默认2）
LineWidth 线段粗细 （默认1）
Data: 自定义刻度信息， 数据类型，（当Type=1时才才需要填）
{
Value：刻度Y轴价格 ，
Text:显示文本（可以缺省，缺省就使用Value的值输出), 10257版本以后支持多行文字输出
Color:线段及文字背景色, TextColor:文字颜色
}
DateTime 显示时间格式“HH:MM"， 只有在Type=0， 并且是分钟K线的情况下有效

多行刻度文字

Custom:
[
............
{ 
    Type:1, 
    Position:'right',IsShowLine:true, LineType:0,
    Data:
    [
        {
            Value:9.73,
            Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
            Text:
            [ 
            	{Text:"第1行"}, 
            	{Text:"第2行", TextColor:"rgb(100,100,100)" } //TextColor 可以指定颜色，默认用外部的颜色
            ]
        },
        {
            Value:9.50,
            Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
        }
    ] 
},

..........
]

效果图
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

K线图例子

1 . 显示K线图最新价格刻度， 显示在左边
var option=
 {
      Type:'历史K线图',
     ......
     Frame:  //子框架设置 (Height 窗口高度比例值)
     [
          {   
              SplitCount:5,			//最多输出5个分隔线
              //Height:4,
              IsShowLeftText:false, 	//不显示左边刻度文字
              IsShowRightText:true,    	//显示右边刻度文字                      
              Custom:
              [
                  { 
                      Type:0,
                      Position:'left',
                  }
              ]
          },
 }

效果图
在这里插入图片描述

2. 在K线上15.55， 17.55价格位置增加刻度
var option=
 {
      Type:'历史K线图',
     ......
     Frame:  //子框架设置 (Height 窗口高度比例值)
     [
          {   
              SplitCount:5,			//最多输出5个分隔线
              //Height:4,
              IsShowLeftText:false, 	//不显示左边刻度文字
              IsShowRightText:true,    	//显示右边刻度文字                      
              Custom:
              [
                 { 
                    Type:1, 
                    Position:'left',IsShowLine:true,
                    Data:
                    [
                        {
                            Value:15.55,
                            Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                        }，
                        {
                            Value:17.55,
                            Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                        }
                    ] 
                },
              ]
          },
 }

效果图
在这里插入图片描述

3. 显示最新价格刻度，并且在15.55， 17.55价格位置增加刻度 显示 止损和止盈
var option=
 {
      Type:'历史K线图',
     ......
     Frame:  //子框架设置 (Height 窗口高度比例值)
     [
          {   
              SplitCount:5,			//最多输出5个分隔线
              //Height:4,
              IsShowLeftText:false, 	//不显示左边刻度文字
              IsShowRightText:true,    	//显示右边刻度文字                      
              Custom:
              [
                  { 
                      Type:0,
                      Position:'right',
                  },
                  { 
                      Type:1, 
                      Position:'left',IsShowLine:true,
                      Data:
                      [
                          {
                              Value:15.55,
                              Text:'止损线',  //Text:显示文本
                              Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                          },
                          {
                              Value:17.55,
                              Text:'止盈线',  //Text:显示文本
                              Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                          }
                      ] 
                  }
              ]
          },
 }

效果图
在这里插入图片描述

4. 分钟K线显示最新价格及时间

10265版本以后的才支持

Custom:
[
	{ 
		Type:0,
		Position:'right',LineType:1, DateTime:"HH:MM"
	},
......
]

效果图
在这里插入图片描述

走势图例子

1. 在2930点的位置显示刻度
 var option=
 {
     Type:'分钟走势图'
     ......
     Frame:  //子框架设置
	[
	  {
	      SplitCount:5,
	      IsShowLeftText:true,
	      IsShowRightText:true, 
	      Custom:
	      [
	          { 
	              Type:1, 
	              Position:'left',
	              Data:
	              [
	                  {
	                      Value:2930,
	                      Color:'rgb(0,34,255)', TextColor:'rgb(255,255,255)',
	                  },
	              ] 
	          }
	      ]
	  },
..........

效果图
在这里插入图片描述

2. 在涨幅 0.5%的位置显示刻度
 var option=
 {
     Type:'分钟走势图'
     ......
     Frame:  //子框架设置
	[
	  {
	      SplitCount:5,
	      IsShowLeftText:true,
	      IsShowRightText:true, 
	      Custom:
	      [
	          { 
                 Type:1, 
                 Position:'left',
                 Data:
                 [
                     {
                         Increase:0.005, // Value:刻度Y轴价格 Text:显示文本 Increase:涨幅
                         Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                     },
                     
                 ] 
             }
	      ]
	  },
..........

效果图
在这里插入图片描述

3. 最新价格刻度

在收盘价图中右侧显示最新价格

var option=
{
   Type:'分钟走势图'
    ..........
	Frame:  //子框架设置
	[
	   {
	       SplitCount:5,IsShowLeftText:true,IsShowRightText:true,
	       Custom:
	       [
	           { Type:0,Position:'righ' }
	       ]
	   },
	   {SplitCount:3,IsShowLeftText:true,IsShowRightText:true},
	   {SplitCount:3,StringFormat:0},
	],

效果图
在这里插入图片描述

动态更新Y轴自定义刻度

动态修改只能通过修改内部刻度信息来实现
下面是K线的例子， 走势图也一样

this.UpdateCustomY=function()
{
    //修改指标1上Y轴自定义刻度
    this.Chart.JSChartContainer.Frame.SubFrame[0].Frame.YSplitOperator.Custom=
    [
        { 
            Type:1, 
            Position:'right',IsShowLine:true,
            Data:
            [
                {
                    Value:10.55,
                    Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                },
                {
                    Value:10.31,
                    Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                }
            ] 
        }
    ];
   
    this.Chart.JSChartContainer.UpdateFrameMaxMin();	//重新计算最大最小值
    this.Chart.JSChartContainer.ResetFrameXYSplit();	//重新计算X，Y刻度
    this.Chart.JSChartContainer.Draw();					//重绘
}

最新价格刻度颜色配置

配色位置在

function JSChartResource()
{
   .......................................
   //Y轴最新价格刻度颜色
    this.FrameLatestPrice = {
        TextColor:'rgb(255,255,255)',   //最新价格文字颜色
        UpBarColor:"rgb(238,21,21)",    //上涨
        DownBarColor:"rgb(25,158,0)",   //下跌
        UnchagneBarColor:"rgb(0,0,0)",   //平盘
        BGAlpha:0.6		// 刻度文字显示在坐标内部，背景的透明度
    };
.............................
}

通过外部修改这几个变量就可以。

如何修改配色看教程 HQChart使用教程4- 如何自定义K线图颜色风格

单独修改刻度

this.TestPrice=9.30;
this.ChangePriceText=function()
{
    this.TestPrice+=0.02;
    this.Chart.JSChartContainer.Frame.SubFrame[0].Frame.YSplitOperator.Custom=
    [
        {
            Type:1, 
            Position:'right',
            IsShowLine:true, 
            LineType:0,
            Data:
            [
                {
                    Value:this.TestPrice,
                    Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                }
            ] 
        }
        
    ];

    this.Chart.JSChartContainer.Frame.SubFrame[0].Frame.YSplitOperator.Operator();
    this.Chart.JSChartContainer.Draw();
}

HQChart代码地址

地址：github.com/jones2000/HQChart

HQChart
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
实现ECharts双Y轴左右刻度线一致的例子
09-16
在ECharts图表中，双Y轴的设置是一个常见的需求，特别是在需要展示两个不同尺度的数据系列时。例如，一边表示人数，另一边表示人次，这两个数据的数值范围可能相差很大，因此需要独立的Y轴来保证数据的可读性。本文...
MATLAB 绘图库 - 自定义轴设置：自定义轴设置-matlab开发
05-29
这是如何在 MATLAB:registered: 中自定义绘图中的轴设置的示例。 阅读 MATLAB 文档中的“XAxis”属性。 此功能在 R2015b 或更新版本中可用。 有关更多示例，请转到 MATLAB 绘图库 - ...
QtChart中画图时改变坐标轴的范围
Leuuvi的博客
04-21 4639
问题：在画折线图时，根据点的Y值调整Y轴的范围。 错误：在需要改变范围的函数中直接使用setRange，使用时程序报错，程序中止。 错误示例 series->append(QPointF(i,qrand()%10));//增加点 ++i; AxisY->setRange(-1,i+9); 正确用法：前面要加上chart类： 正确示例. series->append(QPointF(i,qrand()%10));//增加点 ++i; serialchart->a
Echarts y轴相关配置
蓑笠翁
09-03 2万+
使用Echarts的坐标轴配置，如y轴位置，y轴偏移量、y轴刻度、y轴最大最小值、次刻度、轴间隔等；
echarts x轴与y轴 刻度 数据设置
Mr_wuying的博客
05-10 1493
【代码】echarts x轴与y轴 刻度 数据设置。
C# 画图控件CHART 自定义坐标轴刻度标签
热门推荐
helloapplepear的博客
09-08 6万+
项目中用到柱形图，当数据列比较多的时候， X轴的刻度标签会被精简为几个，无法在每个柱子下方显示其刻度值。这时候可以用自定义标签解决问题。
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
09-20
Matplotlib是Python提供的一个二维绘图库，所有类型的平面图，包括直方图、散点图、折线图、点图、热图...本文主要介绍了关于Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度的相关资料，需要的朋友可以参考下。
Matplotlib自定义坐标轴刻度的实现示例
09-16
在Python的科学可视化库Matplotlib中，自定义坐标轴刻度是一项重要的功能，尤其是在需要精细控制图表呈现细节时。本文将详细讲解如何使用Matplotlib来实现这一操作。 首先，了解Matplotlib图形对象的层次结构至关...
Echarts自定义Y轴刻度值范围(即最小值与最大值)和等分间隔
LSL1618的博客
12-02 5万+
yAxis: { type: 'value', min: 0.9000, max: 1.1000, interval: 0.0200, // data: [0.9000, 0.9200, 0.9400, 0.9600, 0.9800, 1.0000],// 只有type为category时才有效 axisLabel: { formatter: function (value, index) { return (value * 100).toFixed(2) + "%"; } ..
Winform基础控件之Chart图表控件和pictureBox照片轮播
最新发布
m0_74351572的博客
12-07 1928
Winform基础控件之Chart图表控件和pictureBox照片轮播，有数据就可以通过Chart图表控件进行以图表的形式展现出来，如树状图，折线图，饼图等等，通过图表来进行根号数据的观察和处理，根据直观了解数据的变化。pictureBox照片轮播可以通过imageList控件集合来进行照片的保存和集合，通过图表的下标来分别遍历照片轮播，通过timer定时器和label文本框的结合，进行定时器的时间来改变照片轮播和文字不同的实现方式进行处理，对于在购物页面照片中非常实用，减少冗余，提高代码效率，提高安全性
C# Chart控件
Yingyingjia的博客
11-22 1846
chart1.ChartAreas[0].AxisY.Maximum = 100;//设置Y轴最大值 chart1.ChartAreas[0].AxisY.MajorTickMark.Interval = 10;//设置Y轴刻度间隔 chart1.Series[0].Points.AddXY(0, 88);//添加横坐标为0，纵坐标为88的点 chart1.ChartAreas[0].Axis...
关于QT的charts使用技术总结
yao51011010的专栏
05-11 2016
/ ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
杜永康的博客
12-26 3万+
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //坐标轴刻度文字数据。symbol: ['none', 'arrow'], //坐标轴箭头 (可选'none' 'arrow' ['none','arrow'])
echarts 柱状图 Y轴最小刻度设置为1，以及X轴数据过多是显示不完整的问题
weixin_41765715的博客
08-22 5347
当统计一个月时，会出现日期显示不完整的问题，我们可以使用axisLabel设置坐标轴刻度标签，将interval属性设置为0，这个属性是标签显示间隔，若设置为1则间隔一个显示，另外因为字体太密集会覆盖，可以设置标签旋转一定角度，rotate设置为45。我们可以通过minInterval设置Y轴最小刻度单位。场景：在统计工作量的图表中，患者数不可能出现小数。1.echarts柱状图Y轴最小刻度设置为1。2.解决X轴数据过多时，显示不全的问题。
Qt实践之使用鼠标滚轮改变QChart图表坐标轴范围
qq_40999293的博客
07-19 560
用鼠标滚轮事件实现改变以QDateTimeAxis作为横轴的图表的横轴范围
ECharts关于y轴刻度调整
小柠檬爱编程
09-23 3万+
修改y轴刻度之后是这样的 直接上代码 yAxis: { min:0, //取0为最小刻度 max: 100, //取100为最大刻度 min:'dataMin', //取最小值为最小刻度 max: 'dataMax', //取最大值为最大刻度 min: function(value) {//取最小值向下取整为最小刻度 return Math.floor(value.min).
C# chart1 添加滚动条的缩放 鼠标滚轮控制缩放
ppqgt的博客
03-31 5057
namespace APP { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { chart1.ChartAreas["ChartArea1"].Axis...
echartsy轴自定义刻度
07-29
您可以使用 ECharts 中的 yAxis.axisLabel.formatter 配置项来自定义 y 轴的刻度显示。具体的做法如下所示： ```javascript option = { // 其他配置项... yAxis: { type: 'value', axisLabel: { formatter: function(value) { // 在这里编写您的自定义刻度显示逻辑 // 返回值即为该刻度的显示文本 } } }, // 其他配置项... }; ``` 在 formatter 函数中，您可以编写自己的逻辑来根据数值 value 返回对应的刻度文本。例如，若需要将刻度文本加上单位"万"，可以按如下方式编写： ```javascript option = { // 其他配置项... yAxis: { type: 'value', axisLabel: { formatter: function(value) { return value / 10000 + '万'; } } }, // 其他配置项... }; ``` 以上示例中，将 y 轴的刻度值除以 10000，并在后面加上单位"万"，从而实现了自定义刻度显示。您可以根据实际需求进行更灵活的定制。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HQChart

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值