hqchart使用总结及方法--react+hqchart

1.在react项目中下载hqchart

yarn add hqchart

1.创建一个hqchart图形
//引用HQChart ,要使用状态栏的小图标必须引用css

import HQChart from 'hqchart';
import $ from 'jquery';
import import 'hqchart/src/jscommon/umychart.resource/css/tools.css';
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css';
var chart =null

//需要的Option

 KLine: {
        JSChart: null,
        Option: {
          Type: '历史K线图',
          // NetworkFilter: this.NetworkFilter,
          IsShowCorssCursorInfo: true,
          // IsAutoUpdate: true,
          // AutoUpdateFrequency: 10000, //数据更新频率 ms
          EnableYDrag: { Right: true },
          // IsShowRightMenu:true,//右键菜单
          //窗口指标
          Windows: [
            {
              Index: '可视范围成交量分布图',
              Option: {
                VolType: 0,
                BarPosition: 1,
                BarWidthRate: 0.3,
                DelayRequestFrequency: 100,
              },
            },
            { Index: 'VOL', Modify: true, Change: true, Close: true },
          ],
          叠加指标
          // OverlayIndex:
          // [

          // {Index:'BOLL', Windows:0 , IsShareY:true,ShowRightText:true },
          // {Index:'RSI', Windows:0, ShowRightText:true },
          // {Index:'MACD', Windows:0, ShowRightText:true },
          // { Windows: 1, IndexName: "指标ID", Name: "自定义指标", Script: "T:MA(O,20),LINETHICK2;", Identify: "guid_66990", ShowRightText: false }
          // ],

          //    Symbol: '600000.sh',
          // IsAutoUpdate: true,//更新
          // IsShowCorssCursorInfo: true,//鼠标移动或手势的时候是否显示十字光标
          // IsApiPeriod: true,      //使用Api计算周期
          // IsClickShowCorssCursor: true,    //手势点击出现十字光标
          // IsCorssOnlyDrawKLine: true,      //十字光标在K线中间
          // CorssCursorTouchEnd: true,       //手势离开屏幕十字光标自动隐藏
          EnableScrollUpDown: false, //允许手势上下操作滚动页面
          CorssCursorInfo: { Left: 0, Right: 2, Bottom: 1, IsShowCorss: true }, //十字光标刻度设置 Left, Right, Bottom十字光标刻度显示设置 0=不显示 1=现在在框外 2=显示在框内

          //边框
          Border: {
            Left: 22, //左边间距
            Right: 55, //右边间距
            Top: 25,
            Bottom: 25,
          },
          ExtendChart: [
            { Name: 'KLineTooltip' },
            // {Name:'画图工具',Top:25},
          ], //tooltip十字光标提示信息
          KLine: {
            DragMode: 1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
            Right: 1, //复权 0 不复权 1 前复权 2 后复权
            Period: 0, //周期: 0 日线 1 周线 2 月线 3 年线
            PageSize: 10, //一屏显示多少数据
            IsShowTooltip: true, //是否显示K线提示信息(浮窗数据弹框)
            // MaxReqeustDataCount: 1000, //日线数据最近1000天
            // MaxRequestMinuteDayCount: 15, //分钟数据最近15天
            DrawType: 5, //0=实心K线柱子   1=收盘价线 2=美国线 3=空心K线柱子   4=收盘价面积图5=订单流 6=完全空心K线柱子
            InfoPosition: 1, //显示位置
            KLineDoubleClick: true, //双击分钟走势图
            // MaxMin: { Font: 12 +'px 微软雅黑', Color: 'rgb(111,111,111)' },   //K线最大最小值显示
            //信息地雷
            Info: {
              Color: 'rgb(205,149,12)',
              TextColor: '#afc0da',
              TextBGColor: '#1a283e',
            },
          },
          //标题设置
          // KLineTitle: {
          //     IsShowName: false, //不显示股票名称
          //     IsShowSettingInfo: false, //不显示周期/复权
          // },
          //子框架设置
          Frame: [
            {
              SplitCount: 3,
              IsShowLeftText: false,
              IsShowRightText: true,
              Custom: [{ Type: 0 }],
              SplitType: 1,
            },
            // { SplitCount: 3, IsShowLeftText: false, IsShowRightText: true },
            // { SplitCount: 3, IsShowLeftText: false, IsShowRightText: true },
          ],
        },
      },

//代码初始化图形
//hqchart图形适配 把chart 放在最外面就可以控制

  initCanvas() {
    this.state.KLine.Option.NetworkFilter = (data, callback) => {
      this.NetworkFilter(data, callback);
    }; //网络请求回调函数
    var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(
      HQChart.Chart.STYLE_TYPE_ID.BLACK_ID,
    );
    // HQChart.Chart.JSChart.GetResource().FrameLogo.Text = null;
    // HQChart.Chart.JSChart.SetStyle(blackStyle);
    HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus =      function (symbol) {
      const marketStatus = Tools.GetMarketStatus();
      return marketStatus;
    };
    var zoom = HQChart.Chart.JSChart.GetKLineZoom();
    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]);
    }
    if (this.state.KLine.JSChart) return;

    // document.getElementById("time_graph_canvas").style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
    this.state.KLine.Option.Symbol = this.state.Symbol;
    //赋值chart 
    chart = HQChart.Chart.JSChart.Init(
      document.getElementById('time_graph_canvas'),
    );

    chart.SetOption(this.state.KLine.Option);
    chart.OnSize();
    //
    this.OnSize();
    this.state.KLine.JSChart = chart;
   
  }

  OnSize() {
    var width = window.innerWidth;
    var chartHeight = window.innerHeight;
    $('#time_graph_canvas').width(width);
    $('#time_graph_canvas').height(chartHeight);
  }
  componentDidMount() {
    var _this = this;
    this.initCanvas();

    window.onresize = function () {
    //OnSize控制 chart 
      _this.OnSize();
    };
  }

//动态请求网络数据接口
1.根据不同的 Period: 0, //周期: 0 日线 1 周线 2 月线 3 年线去使用NetworkFilter里的data会返回Name

  NetworkFilter(
    data,
    callback, //网络协议回调
  ) {
    data.PreventDefault = true; //设置hqchart不请求数据
    switch (data.Name) {
      case 'KLineChartContainer::RequestHistoryData': //日线
        //通过data.Request里的数据 对应到第3方数据
        this.RequestHistoryData(data, callback, 'RequestHistoryData');
        break;
      case 'KLineChartContainer::RequestVolumeProfileData': //动态切换指标
        data.Request.Period = 4;
        var option = { ...data, Chart: chart };
        this.RequestVolumeProfileDatas(data, callback, option);
        break;
    }
  }
  //根据格式 callback数据就成功显示
  RequestHistoryData(){
     getData().then((res) => {
      const {
        data: { data },
      } = res;
      let newData = {
        data: [...data.buffKline],
        symbol: 'CM_114.DCE',
        name: '玉米主力',
        code: 0,
      };
    callback(newData);
    });
  }