HQChart實戰教程1-外匯分時圖

需求

對接第3方外匯數據，顯示外匯分時圖,
注意這種分時圖是固定時間段的，是不能左右拖動的。如果要左右拖動的使用K線面積圖來做。
第3方數據，接觸下來，一般好像沒有當日分時的API接口，　都是給１分鐘K線。　所以這邊就以１分鐘K線來對接。但如果由當日分鐘K線的接口這最好。
數據格式如下
C是收盤價，Tick時間, O是開盤價,H是最高價,L是最低價,A是交易額，V是交易量, D日期+時間

var TEST_DATA={
	"code": 0,
	"obj": [
		{
			"C": 1.1022400000000001,
			"Tick": 1574666640,
			"D": "2019-11-25 15:24:00",
			"O": 1.1022099999999999,
			"H": 1.10225,
			"L": 1.1022099999999999,
			"A": 0,
			"V": 24
		},
		{
			"C": 1.10222,
			"Tick": 1574666580,
			"D": "2019-11-25 15:23:00",
			"O": 1.10225,
			"H": 1.10226,
			"L": 1.1022000000000001,
			"A": 0,
			"V": 58
		},
		.........
		]
}

HQChart需要的數據

時間段 6：00 - 第2天的5：59 ， 1分鐘1個數據，一共1440 個數據
當天的前收盤，這個是用來畫Y 軸中線和計算漲幅用的。
1分鐘數據需要
price=收盤價 open=開盤價 high=最高 low=最低 amount=金額 vol=成交量 注意了都是數值型，不要字符串
date=日期整型格式 yyyymmdd 如： 20191010 ->2019-10-10
time=時間整型格式 hhmm 如 925 =》 9：15 1318=》13:15

品種代碼

hqchart設計的時候要求支持所有品種，所以內部使用統一的品種代碼防止代碼重名，品種代碼+品種類型後綴。外匯品種後綴是.FOREX，如EURUSD =》EURUSD.FOREX

網絡協議名字

MinuteChartContainer::RequestMinuteData 分時數據就這1個協議，當天全量數據和更新都是使用這個協議。

網絡協議回調

使用NetworkFilter回調，並且處理 MinuteChartContainer::RequestMinuteData 協議。
把單個協議處理放到不同的函數裏面處理，這樣邏輯比較清楚點，如果都放在NetworkFilter會很亂不方面閱讀。如果你們有codeview的話，可以讓閱讀你代碼的人更瞭解你的思慮。切記一個函數的代碼千萬不要太長，太長了不方便閱讀。

//網絡協議回調
NetworkFilter(data, callback)
{
    console.log('[MinuteChart::NetworkFilter] data', data);
    switch(data.Name)
    {
        case 'MinuteChartContainer::RequestMinuteData':     //當天數據下載
            this.RequestMinuteData(data, callback);
            break;
    }
},

分時數據下載

這裏把我數據請求分成2部分，1. 是當前的全量數據下載 2. 當天的最新的分鐘數據更細數據
通過判斷data.Self.ChartSplashPaint.IsEnableSplash 狀態可以知道是全量還是增量下載數據

RequestMinuteData(data, callback)   //請求分鐘數據
{
     data.PreventDefault=true;   //禁止使用HQChart內部請求
     var stock={OriginalSymbol:this.OriginalSymbol, Symbol:data.Request.Data.symbol[0]};    //原始代碼， 內部代碼
     if (data.Self.ChartSplashPaint.IsEnableSplash)
     {
         console.log('[MinuteChart::RequestMinuteData] first reqeust');
         this.RequestDayMinuteData(data, callback,stock);    //全量數據
     }
     else 
     {
         console.log('[MinuteChart::RequestMinuteData] update reqeust');
         this.RequestUpdateMinuteData(data, callback,stock); //增量數據
     }
 },

當天全量數據下載

這裏我把數據保存到了本地，直接讀本地數據了。實際使用的時候改成ajax請求就可以。
stock.OriginalSymbol 是外部的原始代碼，根據這個請求第3方api.

RequestDayMinuteData(data,callback, stock) //請求當天的所有分鐘數據
{
     console.log(`[MinuteChart::RequestDayMinuteData] request all minute data . OriginalSymbol=${stock.OriginalSymbol}, Symbol=${stock.Symbol}`);

     //模擬異步請求數據
     setTimeout(() => {
         this.RecvMinuteData(Data.TEST_DATA, callback,stock);
     }, 200);
 },

全量數據轉hqchart格式

由於數據是1分鐘K線，所有需要找到開盤的第1個數據位置（6：00）
前收盤也需要自己找下，去6：00的上一個數據收盤價就是當天的昨收盤
把分鐘數據都成hqchart格式的數據
name:品種的中文名稱,
symbol:品種的代碼（帶統一後綴的）
yclose:前收盤數值型
minute:當天所有的分鐘數據，數組
把數據緩存下，更新數據的時候就更新這個數據就可以了。
把數據通過 callback() 傳個hqchart

RecvMinuteData(recvData,callback,stock)
{
    //分時顯示固定時間段 6:00-第2天的5:59
    var startIndex=-1;
    for(var i in recvData.obj) //取最近的一個6點數據
    {
        var item=recvData.obj[i];
        var dateTime=item.D.split(' ');
        if (dateTime[1]=='06:00:00')
        {
            startIndex=parseInt(i);
            break;
        }
    }

    var yClose=parseFloat(recvData.obj[startIndex+1].C);    //昨收盤
    var minuteData=[];   //HQChart 分時數據格式

    //symbol：填hqchart統一的內部代碼, name:名稱，這個使用原始代碼 你也可以用中文名字
    var stockData={name:stock.OriginalSymbol, symbol:stock.Symbol, yclose:yClose, minute:minuteData };

    for(var i=startIndex;i>=0;--i)
    {
        var item=recvData.obj[i];
        var dateTime=new Date(item.D);
        //數據都是數值類型!!!
        var date=dateTime.getFullYear()*10000+(dateTime.getMonth()+1)*100+dateTime.getDate();
        var time=dateTime.getHours()*100+dateTime.getMinutes();
        var stockItem=
        { 
            date:date,
            time:time,
            price:parseFloat(item.C), 
            open:parseFloat(item.O),
            high:parseFloat(item.H),
            low:parseFloat(item.L),
            amount:parseFloat(item.A),
            vol:parseFloat(item.V),
        }

        minuteData.push(stockItem);
    }

    this.Cache=stockData;   //把當天全量數據保存起來

    var hqchartData={stock:[stockData]};	//最後的hqchart格式數據
    callback(hqchartData);
},

增量數據更新下載

這邊我沒有寫請求，用了一個定時器模擬異步，後面的數據也是假的，實際你們使用ajax請求增量數據就可以。

RequestUpdateMinuteData(data,callback,stock)  //請求當天的最新的分鐘數據
{
     console.log(`[MinuteChart::RequestDayMinuteData] request update latest minute data . OriginalSymbol=${stock.OriginalSymbol}, Symbol=${stock.Symbol}`);

     //模擬異步請求數據
     setTimeout(() => 
     {
         var recvData={};
         this.RecvUpdateMinuteData(recvData, callback,stock);
     }, 200);
 },

增量數據更新到hqchart

取上次緩存的當天的全量數據
最新數據和全量數據對比下，得出是增加新的分鐘數據還是更新緩存裏的最後1條數據。
如果是新的1分鐘數據，就再minute裏面插入
如果不是新的1分鐘，就更新緩存裏的最後1條數據。
把全量數據通過 callback() 傳個hqchart

RecvUpdateMinuteData(recvData,callback,stock)
{
     //最後1分鐘時間不變，更新緩存中最後1分鐘數據
     var latestItem=this.Cache.minute[this.Cache.minute.length-1];
     latestItem.price=latestItem.price+(Math.ceil(Math.random()*10)*0.0001);   //隨便用一個隨機數據更新數據  

     //如果有最新一分鐘的數據，就往minute.push() 往後插入


      var hqchartData={stock:[this.Cache]};  //把全量數據傳給hqchart
      callback(hqchartData);
 }

自動更新頻率控制

AutoUpdateFrequency 自動更新頻率單位ms
下面是開啓5秒自動更新配置例子。

const option=
 {
      Type: '分鐘走勢圖', //歷史分鐘走勢圖
      .......
      IsAutoUpdate: true, //是自動更新數據
      AutoUpdateFrequency:5000,   //數據更新頻率
      .......

沒有，打完收工了。

上面例子代碼我上傳到羣文件了 forex.2019.11.26.zip，有興趣的可以自己下載看看。

如果還有問題可以加交流QQ羣: 950092318

HQChart代碼地址
地址：github.com/jones2000/HQChart

HQChart實戰教程1-外匯分時圖

HQChart實戰教程1-外匯分時圖

需求

HQChart需要的數據

品種代碼

網絡協議名字

網絡協議回調

分時數據下載

當天全量數據下載

全量數據轉hqchart格式

增量數據更新下載

增量數據更新到hqchart

自動更新頻率控制

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

HQChart實戰教程17 -K線沙盤推演

HQChart使用教程52- 自定義手機端K線圖Tooltip

HQChart實戰教程3-http+ws對接分鐘K線數據

HQChart實戰教程2-使用跨週期寫指標

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結