Chart

自定义图表绘图函数。

    
    
    
Chart(options)

示例

• 多图表绘制配置说明：

  • extension.layout 属性
    当此属性设置为 "single" 时，该图表不会与其他图表叠加显示（即不以分页标签方式呈现），而是单独平铺显示。
  • extension.height 属性
    此属性用于设置图表的高度，取值可以为数值类型，也可以采用 "300px" 的形式设置。
  • extension.col 属性
    此属性用于设置图表的宽度。页面宽度共划分为 12 个单元，设置为 8 即表示该图表占用 8 个单元的宽度。
  • javascript
  • python
  • rust
  • cpp

  
      javascript
      
      
  function main() {
      var cfgA = {
          extension: {
              layout: 'single', // 不参与分组，单独显示，默认为分组 'group'
              height: 300, // 指定高度
          },
          title: {
              text: 'Order Book Chart'
          },
          xAxis: {
              type: 'datetime'
          },
          series: [{
              name: 'Bid 1',
              data: [],
          }, {
              name: 'Ask 1',
              data: [],
          }]
      }
      var cfgB = {
          title: {
              text: 'Spread Chart'
          },
          xAxis: {
              type: 'datetime'
          },
          series: [{
              name: 'Spread',
              type: 'column',
              data: [],
          }]
      }
  
      var cfgC = {
          __isStock: false,
          title: {
              text: 'Pie Chart'
          },
          series: [{
              type: 'pie',
              name: 'one',
              data: [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25],
              ]  // 指定初始数据后无需使用 add 函数更新，直接修改图表配置即可更新数据序列。
          }]
      };
      var cfgD = {
          extension: {
              layout: 'single',
              col: 8, // 指定宽度所占的单元数，总单元数为 12
              height: '300px',
          },
          title: {
              text: 'Order Book Chart'
          },
          xAxis: {
              type: 'datetime'
          },
          series: [{
              name: 'Bid 1',
              data: [],
          }, {
              name: 'Ask 1',
              data: [],
          }]
      }
      var cfgE = {
          __isStock: false,
          extension: {
              layout: 'single',
              col: 4,
              height: '300px',
          },
          title: {
              text: 'Pie Chart 2'
          },
          series: [{
              type: 'pie',
              name: 'one',
              data: [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25],
              ]
          }]
      };
  
      var chart = Chart([cfgA, cfgB, cfgC, cfgD, cfgE]);
      chart.reset()
          // 为饼图追加一个数据点，add 只能更新通过 add 方式添加的数据点，内置的数据点无法在后期更新
      chart.add(3, {
          name: "ZZ",
          y: Math.random() * 100
      });
      while (true) {
          Sleep(1000)
          var ticker = exchange.GetTicker()
          if (!ticker) {
              continue;
          }
          var diff = ticker.Sell - ticker.Buy
          cfgA.subtitle = {
              text: 'Bid ' + ticker.Buy + ', Ask ' + ticker.Sell,
          };
          cfgB.subtitle = {
              text: 'Spread ' + diff,
          };
  
          chart.add([0, [new Date().getTime(), ticker.Buy]]);
          chart.add([1, [new Date().getTime(), ticker.Sell]]);
          // 相当于更新第二个图表的第一个数据序列
          chart.add([2, [new Date().getTime(), diff]]);
          chart.add(4, [new Date().getTime(), ticker.Buy]);
          chart.add(5, [new Date().getTime(), ticker.Buy]);
          cfgC.series[0].data[0][1] = Math.random() * 100;
          cfgE.series[0].data[0][1] = Math.random() * 100;
          // update 实际上等同于重置图表的配置
          chart.update([cfgA, cfgB, cfgC, cfgD, cfgE]);
      }
  }
  

  
      python
      
      
  import random
  import time
  def main():
      cfgA = {
          "extension" : {
              "layout" : "single",
              "height" : 300,
              "col" : 8
          },
          "title" : {
              "text" : "Order Book Chart"
          },
          "xAxis" : {
              "type" : "datetime"
          },
          "series" : [{
              "name" : "Bid 1",
              "data" : []
          }, {
              "name" : "Ask 1",
              "data" : []
          }]
      }
  
      cfgB = {
          "title" : {
              "text" : "Spread Chart"
          },
          "xAxis" : {
              "type" : "datetime",
          },
          "series" : [{
              "name" : "Spread",
              "type" : "column",
              "data" : []
          }]
      }
  
      cfgC = {
          "__isStock" : False,
          "title" : {
              "text" : "Pie Chart"
          },
          "series" : [{
              "type" : "pie",
              "name" : "one",
              "data" : [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25],
              ]
          }]
      }
  
      cfgD = {
          "extension" : {
              "layout" : "single",
              "col" : 8,
              "height" : "300px"
          },
          "title" : {
              "text" : "Order Book Chart"
          },
          "series" : [{
              "name" : "Bid 1",
              "data" : []
          }, {
              "name" : "Ask 1",
              "data" : []
          }]
      }
  
      cfgE = {
          "__isStock" : False,
          "extension" : {
              "layout" : "single",
              "col" : 4,
              "height" : "300px"
          },
          "title" : {
              "text" : "Pie Chart 2"
          },
          "series" : [{
              "type" : "pie",
              "name" : "one",
              "data" : [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25]
              ]
          }]
      }
  
      chart = Chart([cfgA, cfgB, cfgC, cfgD, cfgE])
      chart.reset()
      chart.add(3, {
          "name" : "ZZ",
          "y" : random.random() * 100
      })
  
      while True:
          Sleep(1000)
          ticker = exchange.GetTicker()
          if not ticker :
              continue
          diff = ticker["Sell"] - ticker["Buy"]
          cfgA["subtitle"] = {
              "text" : "Bid " + str(ticker["Buy"]) + " Ask " + str(ticker["Sell"])
          }
          cfgB["subtitle"] = {
              "text" : "Spread " + str(diff)
          }
  
          chart.add(0, [time.time() * 1000, ticker["Buy"]])
          chart.add(1, [time.time() * 1000, ticker["Sell"]])
          chart.add(2, [time.time() * 1000, diff])
          chart.add(4, [time.time() * 1000, ticker["Buy"]])
          chart.add(5, [time.time() * 1000, ticker["Buy"]])
          cfgC["series"][0]["data"][0][1] = random.random() * 100
          cfgE["series"][0]["data"][0][1] = random.random() * 100
  

  
      rust
      
      
  fn main() {
      // Rust 中图表配置为 JSON 字符串，可变部分使用占位符表示，更新时替换占位符以重新构建配置
      let cfg_a_tpl = r#"{
          "extension": {
              "layout": "single",
              "height": 300
          },
          "title": {"text": "Order Book Chart"},
          "subtitle": {"text": "__SUBTITLE__"},
          "xAxis": {"type": "datetime"},
          "series": [{"name": "Bid 1", "data": []}, {"name": "Ask 1", "data": []}]
      }"#;
      let cfg_b_tpl = r#"{
          "title": {"text": "Spread Chart"},
          "subtitle": {"text": "__SUBTITLE__"},
          "xAxis": {"type": "datetime"},
          "series": [{"name": "Spread", "type": "column", "data": []}]
      }"#;
      let cfg_c_tpl = r#"{
          "__isStock": false,
          "title": {"text": "Pie Chart"},
          "series": [{
              "type": "pie",
              "name": "one",
              "data": [["A", __Y__], ["B", 25], ["C", 25], ["D", 25]]
          }]
      }"#;
      let cfg_d = r#"{
          "extension": {
              "layout": "single",
              "col": 8,
              "height": "300px"
          },
          "title": {"text": "Order Book Chart"},
          "xAxis": {"type": "datetime"},
          "series": [{"name": "Bid 1", "data": []}, {"name": "Ask 1", "data": []}]
      }"#;
      let cfg_e_tpl = r#"{
          "__isStock": false,
          "extension": {
              "layout": "single",
              "col": 4,
              "height": "300px"
          },
          "title": {"text": "Pie Chart 2"},
          "series": [{
              "type": "pie",
              "name": "one",
              "data": [["A", __Y__], ["B", 25], ["C", 25], ["D", 25]]
          }]
      }"#;
  
      let cfg_a = cfg_a_tpl.replace("__SUBTITLE__", "");
      let cfg_b = cfg_b_tpl.replace("__SUBTITLE__", "");
      let cfg_c = cfg_c_tpl.replace("__Y__", "25");
      let cfg_e = cfg_e_tpl.replace("__Y__", "25");
  
      let chart = Chart::new(&format!("[{},{},{},{},{}]", cfg_a, cfg_b, cfg_c, cfg_d, cfg_e));
      chart.reset(0);
      // 为饼图追加一个数据点，add 只能更新通过 add 方式添加的数据点，内置的数据点无法在后期更新
      let y = (UnixNano() % 100) as f64;    // 用时间戳模拟随机数
      chart.add(3, &format!(r#"{{"name": "ZZ", "y": {}}}"#, y), -1);
      loop {
          Sleep(1000);
          let ticker = match exchange.GetTicker(None) {
              Ok(t) => t,
              Err(_) => continue,
          };
          let diff = ticker.Sell - ticker.Buy;
          let cfg_a = cfg_a_tpl.replace("__SUBTITLE__", &format!("Bid {}, Ask {}", ticker.Buy, ticker.Sell));
          let cfg_b = cfg_b_tpl.replace("__SUBTITLE__", &format!("Spread {}", diff));
  
          let now = Unix() * 1000;
          chart.add(0, &format!("[{}, {}]", now, ticker.Buy), -1);
          chart.add(1, &format!("[{}, {}]", now, ticker.Sell), -1);
          // 相当于更新第二个图表的第一个数据序列
          chart.add(2, &format!("[{}, {}]", now, diff), -1);
          chart.add(4, &format!("[{}, {}]", now, ticker.Buy), -1);
          chart.add(5, &format!("[{}, {}]", now, ticker.Buy), -1);
          let cfg_c = cfg_c_tpl.replace("__Y__", &format!("{}", (UnixNano() % 100) as f64));
          let cfg_e = cfg_e_tpl.replace("__Y__", &format!("{}", (UnixNano() % 100) as f64));
          // update 实际上等同于重置图表的配置
          chart.update(&format!("[{},{},{},{},{}]", cfg_a, cfg_b, cfg_c, cfg_d, cfg_e));
      }
  }
  

  
      c++
      
      
  void main() {
      json cfgA = R"({
          "extension" : {
              "layout" : "single",
              "height" : 300,
              "col" : 8
          },
          "title" : {
              "text" : "Order Book Chart"
          },
          "xAxis" : {
              "type" : "datetime"
          },
          "series" : [{
              "name" : "Bid 1",
              "data" : []
          }, {
              "name" : "Ask 1",
              "data" : []
          }]
      })"_json;
  
      json cfgB = R"({
          "title" : {
              "text" : "Spread Chart"
          },
          "xAxis" : {
              "type" : "datetime"
          },
          "series" : [{
              "name" : "Spread",
              "type" : "column",
              "data" : []
          }]
      })"_json;
  
      json cfgC = R"({
          "__isStock" : false,
          "title" : {
              "text" : "Pie Chart"
          },
          "series" : [{
              "type" : "pie",
              "name" : "one",
              "data" : [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25]
              ]
          }]
      })"_json;
  
      json cfgD = R"({
          "extension" : {
              "layout" : "single",
              "col" : 8,
              "height" : "300px"
          },
          "title" : {
              "text" : "Order Book Chart"
          },
          "series" : [{
              "name" : "Bid 1",
              "data" : []
          }, {
              "name" : "Ask 1",
              "data" : []
          }]
      })"_json;
  
      json cfgE = R"({
          "__isStock" : false,
          "extension" : {
              "layout" : "single",
              "col" : 4,
              "height" : "300px"
          },
          "title" : {
              "text" : "Pie Chart 2"
          },
          "series" : [{
              "type" : "pie",
              "name" : "one",
              "data" : [
                  ["A", 25],
                  ["B", 25],
                  ["C", 25],
                  ["D", 25]
              ]
          }]
      })"_json;
  
      auto chart = Chart({cfgA, cfgB, cfgC, cfgD, cfgE});
      chart.reset();
      json zz = R"({
          "name" : "ZZ",
          "y" : 0
      })"_json;
      zz["y"] = rand() % 100;
      chart.add(3, zz);
  
      while(true) {
          Sleep(1000);
          auto ticker = exchange.GetTicker();
          if(!ticker.Valid) {
              continue;
          }
          auto diff = ticker.Sell - ticker.Buy;
          json cfgASubTitle = R"({"text" : ""})"_json;
          cfgASubTitle["text"] = str_format("买一 %f , 卖一 %f", ticker.Buy, ticker.Sell);
          cfgA["subtitle"] = cfgASubTitle;
  
          json cfgBSubTitle = R"({"text" : ""})"_json;
          cfgBSubTitle["text"] = str_format("价差 %f", diff);
          cfgB["subtitle"] = cfgBSubTitle;
  
          chart.add(0, {Unix() * 1000, ticker.Buy});
          chart.add(1, {Unix() * 1000, ticker.Sell});
          chart.add(2, {Unix() * 1000, diff});
          chart.add(4, {Unix() * 1000, ticker.Buy});
          chart.add(5, {Unix() * 1000, ticker.Buy});
          cfgC["series"][0]["data"][0][1] = rand() % 100;
          cfgE["series"][0]["data"][0][1] = rand() % 100;
          chart.update({cfgA, cfgB, cfgC, cfgD, cfgE});
      }
  }
  

• 简单的绘图示例：

  • javascript
  • python
  • rust
  • cpp

  
      javascript
      
      
  // 在 JavaScript 中，chart 是一个对象；在调用 Chart 函数之前，我们需要先声明一个用于配置图表的对象变量 chart
  var chart = {
      // 该字段用于标记图表是否为普通图表，感兴趣的读者可以改为 false 运行查看效果
      __isStock: true,
      // 提示框
      tooltip: {xDateFormat: '%Y-%m-%d %H:%M:%S, %A'},
      // 标题
      title : { text : '差价分析图'},
      // 选择范围
      rangeSelector: {
          buttons:  [{type: 'hour',count: 1, text: '1h'}, {type: 'hour',count: 3, text: '3h'}, {type: 'hour', count: 8, text: '8h'}, {type: 'all',text: 'All'}],
          selected: 0,
          inputEnabled: false
      },
      // 横轴（即 x 轴），当前设置的类型为：时间
      xAxis: { type: 'datetime'},
      // 纵轴（即 y 轴），默认数值随数据大小自动调整
      yAxis : {
          // 标题
          title: {text: '差价'},
          // 是否启用右侧纵轴
          opposite: false
      },
      // 数据系列，该属性保存各个数据系列（折线、K 线图、标签等……）
      series : [
          // 索引为 0，data 数组中存放的是该索引系列的数据
          {name : "line1", id : "Line 1,buy1Price", data : []},
          // 索引为 1，设置了 dashStyle: 'shortdash'，即将其设置为虚线
          {name : "line2", id : "Line 2,lastPrice", dashStyle : 'shortdash', data : []}
      ]
  }
  
  function main(){
      // 调用 Chart 函数，初始化图表
      var ObjChart = Chart(chart)
      // 清空
      ObjChart.reset()
      while(true){
          // 获取本次轮询的时间戳（即毫秒级时间戳），用于确定写入图表的 X 轴位置
          var nowTime = new Date().getTime()
          // 获取行情数据
          var ticker = _C(exchange.GetTicker)
          // 从行情数据的返回值中取得买一价
          var buy1Price = ticker.Buy
          // 取得最新成交价，为避免两条线相互重合，此处将其加 1
          var lastPrice = ticker.Last + 1
          // 以时间戳作为 X 值、买一价作为 Y 值，传入索引 0 的数据序列
          ObjChart.add(0, [nowTime, buy1Price])
          // 同上
          ObjChart.add(1, [nowTime, lastPrice])
          Sleep(2000)
      }
  }
  

  
      python
      
      
  import time
  chart = {
      "__isStock" : True,
      "tooltip" : {"xDateFormat" : "%Y-%m-%d %H:%M:%S, %A"},
      "title" : {"text" : "Spread Analysis Chart"},
      "rangeSelector" : {
          "buttons" : [{"type": "count", "count": 1, "text": "1h"}, {"type": "hour", "count": 3, "text": "3h"}, {"type": "hour", "count": 8, "text": "8h"}, {"type": "all", "text": "All"}],
          "selected": 0,
          "inputEnabled": False
      },
      "xAxis": {"type": "datetime"},
      "yAxis": {
          "title": {"text": "Spread"},
          "opposite": False
      },
      "series": [{
          "name": "line1", "id": "Line 1,buy1Price", "data": []
      }, {
          "name": "line2", "id": "Line 2,lastPrice", "dashStyle": "shortdash", "data": []
      }]
  }
  def main():
      ObjChart = Chart(chart)
      ObjChart.reset()
      while True:
          nowTime = time.time() * 1000
          ticker = exchange.GetTicker()
          buy1Price = ticker["Buy"]
          lastPrice = ticker["Last"] + 1
          ObjChart.add(0, [nowTime, buy1Price])
          ObjChart.add(1, [nowTime, lastPrice])
          Sleep(2000)
  

  
      rust
      
      
  fn main() {
      // 在 Rust 中，图表配置为 JSON 字符串；在调用 Chart::new 函数之前，先定义图表配置
      let chart = r#"{
          "__isStock": true,
          "tooltip": {"xDateFormat": "%Y-%m-%d %H:%M:%S, %A"},
          "title": {"text": "差价分析图"},
          "rangeSelector": {
              "buttons": [{"type": "hour", "count": 1, "text": "1h"}, {"type": "hour", "count": 3, "text": "3h"}, {"type": "hour", "count": 8, "text": "8h"}, {"type": "all", "text": "All"}],
              "selected": 0,
              "inputEnabled": false
          },
          "xAxis": {"type": "datetime"},
          "yAxis": {
              "title": {"text": "差价"},
              "opposite": false
          },
          "series": [
              {"name": "line1", "id": "Line 1,buy1Price", "data": []},
              {"name": "line2", "id": "Line 2,lastPrice", "dashStyle": "shortdash", "data": []}
          ]
      }"#;
  
      // 调用 Chart::new 函数，初始化图表
      let obj_chart = Chart::new(chart);
      // 清空
      obj_chart.reset(0);
      loop {
          // 获取本次轮询的时间戳（即毫秒级时间戳），用于确定写入图表的 X 轴位置
          let now_time = Unix() * 1000;
          // 获取行情数据
          let ticker = _C!(exchange.GetTicker(None));
          // 从行情数据的返回值中取得买一价
          let buy1_price = ticker.Buy;
          // 取得最新成交价，为避免两条线相互重合，此处将其加 1
          let last_price = ticker.Last + 1.0;
          // 以时间戳作为 X 值、买一价作为 Y 值，传入索引 0 的数据序列
          obj_chart.add(0, &format!("[{}, {}]", now_time, buy1_price), -1);
          // 同上
          obj_chart.add(1, &format!("[{}, {}]", now_time, last_price), -1);
          Sleep(2000);
      }
  }
  

  
      c++
      
      
  void main() {
      // 使用 C++ 编写策略时，尽量不要声明非基础类型的全局变量，因此将图表配置对象声明在 main 函数内
      json chart = R"({
          "__isStock" : true,
          "tooltip" : {"xDateFormat" : "%Y-%m-%d %H:%M:%S, %A"},
          "title" : {"text" : "Spread Analysis Chart"},
          "rangeSelector" : {
              "buttons" : [{"type": "count", "count": 1, "text": "1h"}, {"type": "hour", "count": 3, "text": "3h"}, {"type": "hour", "count": 8, "text": "8h"}, {"type": "all", "text": "All"}],
              "selected": 0,
              "inputEnabled": false
          },
          "xAxis": {"type": "datetime"},
          "yAxis": {
              "title": {"text": "Spread"},
              "opposite": false
          },
          "series": [{
              "name": "line1", "id": "Line 1,buy1Price", "data": []
          }, {
              "name": "line2", "id": "Line 2,lastPrice", "dashStyle": "shortdash", "data": []
          }]
      })"_json;
      auto ObjChart = Chart(chart);
      ObjChart.reset();
      while(true) {
          auto nowTime = Unix() * 1000;
          auto ticker = exchange.GetTicker();
          auto buy1Price = ticker.Buy;
          auto lastPrice = ticker.Last + 1.0;
          ObjChart.add(0, {nowTime, buy1Price});
          ObjChart.add(1, {nowTime, lastPrice});
          Sleep(2000);
      }
  }
  

• 绘制三角函数曲线的示例：

  • javascript
  • python
  • rust
  • cpp

  
      javascript
      
      
  // 用于初始化图表的配置对象
  var chart = {
      // 图表标题
      title: {text: "Line value triggers plotLines value"},
      // Y 轴相关设置
      yAxis: {
          // 垂直于 Y 轴的水平线，用作触发线；这是一个结构体数组，可设置多条触发线
          plotLines: [{
              // 触发线的值，该线将显示在对应的数值位置
              value: 0,
              // 设置触发线的颜色
              color: 'red',
              // 线宽
              width: 2,
              // 显示的标签
              label: {
                  // 标签文本
                  text: 'Trigger Value',
                  // 标签居中对齐
                  align: 'center'
              }
          }]
      },
      // X 轴相关设置，此处将类型设置为时间轴
      xAxis: {type: "datetime"},
      series: [
          {name: "sin", type: "spline", data: []},
          // 数据系列，可设置多个，并通过数组索引进行控制
          {name: "cos", type: "spline", data: []}
      ]
  }
  function main(){
      // 圆周率
      var pi = 3.1415926535897
      // 用于记录时间戳的变量
      var time = 0
      // 角度
      var angle = 0
      // 坐标 y 值，用于接收正弦值或余弦值
      var y = 0
      // 调用 API 接口，使用 chart 对象初始化图表
      var objChart = Chart(chart)
      // 初始化时清空图表
      objChart.reset()
      // 将触发线的值设置为 1
      chart.yAxis.plotLines[0].value = 1
      // 循环
      while(true){
          // 获取当前时刻的时间戳
          time = new Date().getTime()
          // 每 500ms 将角度 angle 增加 5 度，并计算正弦值
          y = Math.sin(angle * 2 * pi / 360)
          // 将计算得到的 y 值写入图表对应索引的数据系列，add 函数的第一个参数为指定的数据系列索引
          objChart.add(0, [time, y])
          // 计算余弦值
          y = Math.cos(angle * 2 * pi / 360)
          objChart.add(1, [time, y])
          // 增加 5 度
          angle += 5
          // 暂停 5 秒，避免绘图过于频繁、数据增长过快
          Sleep(5000)
      }
  }
  

  
      python
      
      
  import math
  import time
  chart = {
      "title": {"text": "Line value triggers plotLines value"},
      "yAxis": {
          "plotLines": [{
              "value": 0,
              "color": "red",
              "width": 2,
              "label": {
                  "text": "Trigger Value",
                  "align": "center"
              }
          }]
      },
      "xAxis": {"type": "datetime"},
      "series": [{"name": "sin", "type": "spline", "data": []},
                 {"name": "cos", "type": "spline", "data": []}]
  }
  def main():
      pi = 3.1415926535897
      ts = 0
      angle = 0
      y = 0
      objChart = Chart(chart)
      objChart.reset()
      chart["yAxis"]["plotLines"][0]["value"] = 1
      while True:
          ts = time.time() * 1000
          y = math.sin(angle * 2 * pi / 360)
          objChart.add(0, [ts, y])
          y = math.cos(angle * 2 * pi / 360)
          objChart.add(1, [ts, y])
          angle += 5
          Sleep(5000)
  

  
      rust
      
      
  fn main() {
      // 用于初始化图表的 JSON 配置字符串，触发线的值在配置中直接设置为 1
      let chart = r#"{
          "title": {"text": "Line value triggers plotLines value"},
          "yAxis": {
              "plotLines": [{
                  "value": 1,
                  "color": "red",
                  "width": 2,
                  "label": {
                      "text": "Trigger Value",
                      "align": "center"
                  }
              }]
          },
          "xAxis": {"type": "datetime"},
          "series": [{"name": "sin", "type": "spline", "data": []},
                     {"name": "cos", "type": "spline", "data": []}]
      }"#;
      // 圆周率
      let pi = 3.1415926535897_f64;
      // 角度
      let mut angle = 0.0_f64;
      // 调用 API 接口，使用 chart 配置初始化图表
      let obj_chart = Chart::new(chart);
      // 初始化时清空图表
      obj_chart.reset(0);
      // 循环
      loop {
          // 获取当前时刻的毫秒时间戳
          let ts = Unix() * 1000;
          // 将角度 angle 增加 5 度，并计算正弦值
          let mut y = (angle * 2.0 * pi / 360.0).sin();
          // 将计算得到的 y 值写入图表对应索引的数据系列，add 函数的第一个参数为指定的数据系列索引
          obj_chart.add(0, &format!("[{}, {}]", ts, y), -1);
          // 计算余弦值
          y = (angle * 2.0 * pi / 360.0).cos();
          obj_chart.add(1, &format!("[{}, {}]", ts, y), -1);
          // 增加 5 度
          angle += 5.0;
          // 暂停 5 秒，避免绘图过于频繁、数据增长过快
          Sleep(5000);
      }
  }
  

  
      c++
      
      
  void main() {
      json chart = R"({
          "title": {"text": "Line value triggers plotLines value"},
          "yAxis": {
              "plotLines": [{
                  "value": 0,
                  "color": "red",
                  "width": 2,
                  "label": {
                      "text": "Trigger Value",
                      "align": "center"
                  }
              }]
          },
          "xAxis": {"type": "datetime"},
          "series": [{"name": "sin", "type": "spline", "data": []},
                     {"name": "cos", "type": "spline", "data": []}]
      })"_json;
  
      auto pi = 3.1415926535897;
      auto ts = 0;
      auto angle = 0.0;
      auto y = 0.0;
      auto objChart = Chart(chart);
      objChart.reset();
      chart["yAxis"]["plotLines"][0]["value"] = 1;
      while(true) {
          ts = Unix() * 1000;
          y = sin(angle * 2 * pi / 360);
          objChart.add(0, {ts, y});
          y = cos(angle * 2 * pi / 360);
          objChart.add(1, {ts, y});
          angle += 5;
          Sleep(5000);
      }
  }
  

• 使用混合图表的复杂示例：

  • javascript
  • python
  • rust
  • cpp

  
      javascript
      
      
  /*backtest
  start: 2020-03-11 00:00:00
  end: 2020-04-09 23:59:00
  period: 1d
  exchanges: [{"eid":"Bitfinex","currency":"BTC_USD"}]
  */
  
  var chartCfg = {
      subtitle: {
          text: "subtitle",
      },
      yAxis: [{
          height: "40%",
          lineWidth: 2,
          title: {
              text: 'PnL',
          },
          tickPixelInterval: 20,
          minorGridLineWidth: 1,
          minorTickWidth: 0,
          opposite: true,
          labels: {
              align: "right",
              x: -3,
          }
      }, {
          title: {
              text: 'Profit',
          },
          top: "42%",
          height: "18%",
          offset: 0,
          lineWidth: 2
      }, {
          title: {
              text: 'Vol',
          },
          top: '62%',
          height: '18%',
          offset: 0,
          lineWidth: 2
      }, {
          title: {
              text: 'Asset',
          },
          top: '82%',
          height: '18%',
          offset: 0,
          lineWidth: 2
      }],
      series: [{
          name: 'PnL',
          data: [],
          id: 'primary',
          tooltip: {
              xDateFormat: '%Y-%m-%d %H:%M:%S'
          },
          yAxis: 0
      }, {
          type: 'column',
          lineWidth: 2,
          name: 'Profit',
          data: [],
          yAxis: 1,
      }, {
          type: 'column',
          name: 'Trade',
          data: [],
          yAxis: 2
      }, {
          type: 'area',
          step: true,
          lineWidth: 0,
          name: 'Long',
          data: [],
          yAxis: 2
      }, {
          type: 'area',
          step: true,
          lineWidth: 0,
          name: 'Short',
          data: [],
          yAxis: 2
      }, {
          type: 'line',
          step: true,
          color: '#5b4b00',
          name: 'Asset',
          data: [],
          yAxis: 3
      }, {
          type: 'pie',
          innerSize: '70%',
          name: 'Random',
          data: [],
          center: ['3%', '6%'],
          size: '15%',
          dataLabels: {
              enabled: false
          },
          startAngle: -90,
          endAngle: 90,
      }],
  };
  
  function main() {
      let c = Chart(chartCfg);
      let preTicker = null;
      while (true) {
          let t = exchange.GetTicker();
  
          c.add(0, [t.Time, t.Last]); // PnL
          c.add(1, [t.Time, preTicker ? t.Last - preTicker.Last : 0]); // profit
          let r = Math.random();
          var pos = parseInt(t.Time/86400);
          c.add(2, [t.Time, pos/2]); // Vol
          c.add(3, [t.Time, r > 0.8 ? pos : null]); // Long
          c.add(4, [t.Time, r < 0.8 ? -pos : null]); // Short
          c.add(5, [t.Time, Math.random() * 100]); // Asset
          // update pie
          chartCfg.series[chartCfg.series.length-1].data = [
              ["A", Math.random()*100],
              ["B", Math.random()*100],
           ];
          c.update(chartCfg)
          preTicker = t;
      }
  }
  

  
      python
      
      
  '''backtest
  start: 2020-03-11 00:00:00
  end: 2020-04-09 23:59:00
  period: 1d
  exchanges: [{"eid":"Bitfinex","currency":"BTC_USD"}]
  '''
  
  import random
  
  chartCfg = {
      "subtitle": {
          "text": "subtitle"
      },
      "yAxis": [{
          "height": "40%",
          "lineWidth": 2,
          "title": {
              "text": 'PnL'
          },
          "tickPixelInterval": 20,
          "minorGridLineWidth": 1,
          "minorTickWidth": 0,
          "opposite": True,
          "labels": {
              "align": "right",
              "x": -3
          }
      }, {
          "title": {
              "text": 'Profit'
          },
          "top": "42%",
          "height": "18%",
          "offset": 0,
          "lineWidth": 2
      }, {
          "title": {
              "text": 'Vol'
          },
          "top": '62%',
          "height": '18%',
          "offset": 0,
          "lineWidth": 2
      }, {
          "title": {
              "text": 'Asset'
          },
          "top": '82%',
          "height": '18%',
          "offset": 0,
          "lineWidth": 2
      }],
      "series": [{
          "name": 'PnL',
          "data": [],
          "id": 'primary',
          "tooltip": {
              "xDateFormat": '%Y-%m-%d %H:%M:%S'
          },
          "yAxis": 0
      }, {
          "type": 'column',
          "lineWidth": 2,
          "name": 'Profit',
          "data": [],
          "yAxis": 1
      }, {
          "type": 'column',
          "name": 'Trade',
          "data": [],
          "yAxis": 2
      }, {
          "type": 'area',
          "step": True,
          "lineWidth": 0,
          "name": 'Long',
          "data": [],
          "yAxis": 2
      }, {
          "type": 'area',
          "step": True,
          "lineWidth": 0,
          "name": 'Short',
          "data": [],
          "yAxis": 2
      }, {
          "type": 'line',
          "step": True,
          "color": '#5b4b00',
          "name": 'Asset',
          "data": [],
          "yAxis": 3
      }, {
          "type": 'pie',
          "innerSize": '70%',
          "name": 'Random',
          "data": [],
          "center": ['3%', '6%'],
          "size": '15%',
          "dataLabels": {
              "enabled": False
          },
          "startAngle": -90,
          "endAngle": 90
      }]
  }
  
  def main():
      c = Chart(chartCfg)
      preTicker = None
      while True:
          t = exchange.GetTicker()
          c.add(0, [t["Time"], t["Last"]])
          profit = t["Last"] - preTicker["Last"] if preTicker else 0
          c.add(1, [t["Time"], profit])
          r = random.random()
          pos = t["Time"] / 86400
          c.add(2, [t["Time"], pos / 2])
          long = pos if r > 0.8 else None
          c.add(3, [t["Time"], long])
          short = -pos if r < 0.8 else None
          c.add(4, [t["Time"], short])
          c.add(5, [t["Time"], random.random() * 100])
  
          # update pie
          chartCfg["series"][len(chartCfg["series"]) - 1]["data"] = [
              ["A", random.random() * 100],
              ["B", random.random() * 100]
          ]
          c.update(chartCfg)
          preTicker = t
  

  
      rust
      
      
  /*backtest
  start: 2020-03-11 00:00:00
  end: 2020-04-09 23:59:00
  period: 1d
  exchanges: [{"eid":"Bitfinex","currency":"BTC_USD"}]
  */
  
  fn main() {
      // 在 Rust 中，图表配置以 JSON 字符串形式表示；饼图数据使用占位符 __PIE_DATA__ 标记，更新时替换该占位符后重建配置
      let chart_cfg_tpl = r##"{
          "subtitle": {"text": "subtitle"},
          "yAxis": [{
              "height": "40%",
              "lineWidth": 2,
              "title": {"text": "PnL"},
              "tickPixelInterval": 20,
              "minorGridLineWidth": 1,
              "minorTickWidth": 0,
              "opposite": true,
              "labels": {"align": "right", "x": -3}
          }, {
              "title": {"text": "Profit"},
              "top": "42%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }, {
              "title": {"text": "Vol"},
              "top": "62%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }, {
              "title": {"text": "Asset"},
              "top": "82%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }],
          "series": [{
              "name": "PnL",
              "data": [],
              "id": "primary",
              "tooltip": {"xDateFormat": "%Y-%m-%d %H:%M:%S"},
              "yAxis": 0
          }, {
              "type": "column",
              "lineWidth": 2,
              "name": "Profit",
              "data": [],
              "yAxis": 1
          }, {
              "type": "column",
              "name": "Trade",
              "data": [],
              "yAxis": 2
          }, {
              "type": "area",
              "step": true,
              "lineWidth": 0,
              "name": "Long",
              "data": [],
              "yAxis": 2
          }, {
              "type": "area",
              "step": true,
              "lineWidth": 0,
              "name": "Short",
              "data": [],
              "yAxis": 2
          }, {
              "type": "line",
              "step": true,
              "color": "#5b4b00",
              "name": "Asset",
              "data": [],
              "yAxis": 3
          }, {
              "type": "pie",
              "innerSize": "70%",
              "name": "Random",
              "data": __PIE_DATA__,
              "center": ["3%", "6%"],
              "size": "15%",
              "dataLabels": {"enabled": false},
              "startAngle": -90,
              "endAngle": 90
          }]
      }"##;
  
      let c = Chart::new(&chart_cfg_tpl.replace("__PIE_DATA__", "[]"));
      let mut pre_ticker: Option<Ticker> = None;
      loop {
          let t = exchange.GetTicker(None).unwrap();
  
          c.add(0, &format!("[{}, {}]", t.Time, t.Last), -1); // PnL
          let profit = if let Some(p) = &pre_ticker { t.Last - p.Last } else { 0.0 };
          c.add(1, &format!("[{}, {}]", t.Time, profit), -1); // profit
          let r = (UnixNano() % 100) as f64 / 100.0;          // 使用时间戳模拟随机数
          let pos = (t.Time / 86400) as f64;
          c.add(2, &format!("[{}, {}]", t.Time, pos / 2.0), -1); // Vol
          c.add(3, &format!("[{}, {}]", t.Time, if r > 0.8 { pos.to_string() } else { "null".to_string() }), -1); // Long
          c.add(4, &format!("[{}, {}]", t.Time, if r < 0.8 { (-pos).to_string() } else { "null".to_string() }), -1); // Short
          c.add(5, &format!("[{}, {}]", t.Time, (UnixNano() % 10000) as f64 / 100.0), -1); // Asset
          // update pie
          let pie = format!(r#"[["A", {}], ["B", {}]]"#, (UnixNano() % 100) as f64, (UnixNano() % 100) as f64);
          c.update(&chart_cfg_tpl.replace("__PIE_DATA__", &pie));
          pre_ticker = Some(t);
      }
  }
  

  
      c++
      
      
  /*backtest
  start: 2020-03-11 00:00:00
  end: 2020-04-09 23:59:00
  period: 1d
  exchanges: [{"eid":"Bitfinex","currency":"BTC_USD"}]
  */
  
  void main() {
      json chartCfg = R"({
          "subtitle": {
              "text": "subtitle"
          },
          "yAxis": [{
              "height": "40%",
              "lineWidth": 2,
              "title": {
                  "text": "PnL"
              },
              "tickPixelInterval": 20,
              "minorGridLineWidth": 1,
              "minorTickWidth": 0,
              "opposite": true,
              "labels": {
                  "align": "right",
                  "x": -3
              }
          }, {
              "title": {
                  "text": "Profit"
              },
              "top": "42%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }, {
              "title": {
                  "text": "Vol"
              },
              "top": "62%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }, {
              "title": {
                  "text": "Asset"
              },
              "top": "82%",
              "height": "18%",
              "offset": 0,
              "lineWidth": 2
          }],
          "series": [{
              "name": "PnL",
              "data": [],
              "id": "primary",
              "tooltip": {
                  "xDateFormat": "%Y-%m-%d %H:%M:%S"
              },
              "yAxis": 0
          }, {
              "type": "column",
              "lineWidth": 2,
              "name": "Profit",
              "data": [],
              "yAxis": 1
          }, {
              "type": "column",
              "name": "Trade",
              "data": [],
              "yAxis": 2
          }, {
              "type": "area",
              "step": true,
              "lineWidth": 0,
              "name": "Long",
              "data": [],
              "yAxis": 2
          }, {
              "type": "area",
              "step": true,
              "lineWidth": 0,
              "name": "Short",
              "data": [],
              "yAxis": 2
          }, {
              "type": "line",
              "step": true,
              "color": "#5b4b00",
              "name": "Asset",
              "data": [],
              "yAxis": 3
          }, {
              "type": "pie",
              "innerSize": "70%",
              "name": "Random",
              "data": [],
              "center": ["3%", "6%"],
              "size": "15%",
              "dataLabels": {
                  "enabled": false
              },
              "startAngle": -90,
              "endAngle": 90
          }]
      })"_json;
  
      Chart c = Chart(chartCfg);
      Ticker preTicker;
      while(true) {
          auto t = exchange.GetTicker();
          c.add(0, {t.Time, t.Last});
          auto profit = preTicker.Valid ? t.Last - preTicker.Last : 0;
          c.add(1, {t.Time, profit});
          auto r = rand() % 100;
          auto pos = t.Time / 86400.0;
          c.add(2, {t.Time, pos / 2.0});
          auto longPos = r > 0.8 ? pos : NULL;
          c.add(3, {t.Time, longPos});
          auto shortPos = r < 0.8 ? -pos : NULL;
          c.add(4, {t.Time, shortPos});
          c.add(5, {t.Time, rand() % 100});
  
          // update pie
          json pie = R"([["A", 0], ["B", 0]])"_json;
          pie[0][1] = rand() % 100;
          pie[1][1] = rand() % 100;
          chartCfg["series"][chartCfg["series"].size() - 1]["data"] = pie;
  
          c.update(chartCfg);
          preTicker = t;
      }
  }
  

• 图表中pie类型的图表没有时间轴，因此在更新数据时需要直接更新图表配置。例如，在上述范例的代码中，更新数据后调用c.update(chartCfg)即可刷新图表，如下所示：

  • javascript
  • python
  • rust
  • cpp

  
      javascript
      
      
  // update pie
  chartCfg.series[chartCfg.series.length-1].data = [
      ["A", Math.random()*100],
      ["B", Math.random()*100],
  ];
  c.update(chartCfg)

  
      python
      
      
  # update pie
  chartCfg["series"][len(chartCfg["series"]) - 1]["data"] = [
      ["A", random.random() * 100],
      ["B", random.random() * 100]
  ]
  c.update(chartCfg)

  
      rust
      
      
  // update pie
  // Rust 中图表配置为 JSON 字符串，重建包含新数据的配置后调用 update 更新图表
  let pie = format!(r#"[["A", {}], ["B", {}]]"#, (UnixNano() % 100) as f64, (UnixNano() % 100) as f64);
  c.update(&chart_cfg_tpl.replace("__PIE_DATA__", &pie));
  

  
      c++
      
      
  // update pie
  json pie = R"([["A", 0], ["B", 0]])"_json;
  pie[0][1] = rand() % 100;
  pie[1][1] = rand() % 100;
  chartCfg["series"][chartCfg["series"].size() - 1]["data"] = pie;
  c.update(chartCfg);

返回值

参数

参考

备注

Chart()函数返回一个图表对象，该对象包含4个方法：add()、reset()、update()、del()。

• 1、update()方法：
  update()方法用于更新图表的配置信息，其参数为Chart图表配置对象（JSON）。
• 2、del()方法：
  del()方法根据传入的series参数，删除指定索引的数据系列。
• 3、add()方法：
  add()方法用于向图表中写入数据，参数依次为：
  • series：用于设置数据系列的索引，为整数。
  • data：用于设置写入的具体数据，为一个数组。
  • index（可选）：用于设置数据索引，为整数，指定要修改数据的具体索引位置，支持使用负数表示，设置为-1表示数据集的最后一个数据。
    例如画线时，修改线上最后一个点的数据：chart.add(0, [1574993606000, 13.5], -1)，即更改图表series[0].data中倒数第一个点的数据。不设置index参数时，表示向当前数据系列（series）末尾添加数据。
• 4、reset()方法：
  reset()方法用于清空图表数据，可带一个参数remain，用于指定保留数据的条数。不传入参数remain时，表示清除全部数据。