HQChart使用教程57-如何调整K线的柱子缩放大小

K线缩放

hqchart K线缩放是配置在一个全局的缩放数组里面， 每放大一次或缩小一次， 都会调整这个数组的索引。

var ZOOM_SEED=  //0=柱子宽度  1=间距
[
    [48,10],	[44,10], 
    [40,9],     [36,9],	
    [32,8],     [28,8],	
    [24,7],     [20,7], 
    [18,6],     [16,6],
    [14,5],     [12,5],
    [8,4], [6,4], [4,4], 

    [3,3],
    [3,1], [2,1], [1,1], [1,0],
];

注意：当K线的宽度<=3时， 绘制的时候直接是一条竖线了。

调整缩放数组

JSChart.GetKLineZoom() 可以获取全局的缩放数组实例，获取以后可以根据你的需求自己调整
JSChart.GetKLineZoom(aryZoom) 设置全局的缩放比例数组
实例

var zoom=JSChart.GetKLineZoom(); //获取全局的缩放数组              
//新的K线宽度和间距设置
let NEW_ZOOM_SEED=      //0=柱子宽度  1=间距
[
    [48,10],	[44,10], 
    [40,9],     [36,9],	
    [32,8],     [28,8],	
    [24,7],     [20,7], 
    [18,6],     [16,6],
    [14,5],     [12,5],
    [8,4], [6,4], [4,4], 
];

zoom.length=0;
for(var i=0;i<NEW_ZOOM_SEED.length;++i) //发新的缩放配置设置到hqchart全局变量里面
{
    zoom.push(NEW_ZOOM_SEED[i]);
}

一屏显示更多数据

我们可以往缩放数组的尾部增加更小的缩放比例配置,这样就可以显示更多数据了, [K线宽度, K线间距必须是0]

var zoom=JSChart.GetKLineZoom(); //获取全局的缩放数组              
                
zoom.push([0.9,0]);
zoom.push([0.8,0]);
zoom.push([0.7,0]);
zoom.push([0.6,0]);
zoom.push([0.5,0]);
zoom.push([0.4,0]);
zoom.push([0.3,0]);
zoom.push([0.2,0]);

小程序设置最小K线宽度

在小程序里面 默认K线宽度<4 就会使用竖线绘制。 可以通过配置Resource来调整这个最小值
调的太小了可能会导致有些K线最高最低的竖线不能绘制在柱子的中间，应为h5画布不能精确到小数位的绘图，后模糊。 这个功能小程序才有，h5没做。

import { JSCommon } from "../../jscommon/umychart.wechat.3.0.js";

onReady: function () 
{
    var resouce=JSCommon.JSChart.GetResource();	//获取全局配置
    resouce.MinKLineBarWidth=3;	//修改最小K线宽度
    
    //创建历史K线类
    var element = new JSCommon.JSCanvasElement();
    element.ID = 'historychart';

    element.Height = this.data.Height;   //高度宽度需要手动绑定!! 微信没有元素类
    element.Width = this.data.Width;
    this.HistoryChart = JSCommon.JSChart.Init(element); //把画布绑定到行情模块中
    this.HistoryChart.SetOption(this.HistoryOption);
},

一屏70个K线，最小K线宽度=3

一屏70个K线，最小K线宽度=4

HQChart代码地址

地址：github.com/jones2000/HQChart