语法指南 | 发明者量化

Chart

自定义图表画图函数。


    
    
    
Chart(options)

示例

创建一条折线图，每5秒追加一个最新价数据点。


    javascript
    
    
function main() {
    var chart = Chart({
        title: {text: "最新价"},
        xAxis: {type: "datetime"},
        series: [{name: "Last", data: []}]
    })
    chart.reset()
    while (true) {
        var ticker = exchange.GetTicker()
        if (ticker) {
            chart.add(0, [Date.now(), ticker.Last])
        }
        Sleep(5000)
    }
}


    python
    
    
import time
def main():
    chart = Chart({
        "title": {"text": "最新价"},
        "xAxis": {"type": "datetime"},
        "series": [{"name": "Last", "data": []}]
    })
    chart.reset()
    while True:
        ticker = exchange.GetTicker()
        if ticker:
            chart.add(0, [time.time() * 1000, ticker["Last"]])
        Sleep(5000)


    rust
    
    
fn main() {
    let chart = Chart::new(r#"{"title": {"text": "最新价"}, "xAxis": {"type": "datetime"},
        "series": [{"name": "Last", "data": []}]}"#);
    chart.reset(0);
    loop {
        if let Ok(ticker) = exchange.GetTicker(None) {
            chart.add(0, &format!("[{}, {}]", Unix() * 1000, ticker.Last), -1);
        }
        Sleep(5000);
    }
}

多图表画图配置：

extension.layout属性
如果设置此属性，值为"single"，则图表不会叠加（不会以分页标签方式显示），会单独显示（平铺显示）。
extension.height属性
此属性用于设置图表的高度，值可以为数值类型，或以"300px"方式设置。
extension.col属性
此属性用于设置图表的宽度，页面宽度一共划分为12个单元，设置8即该图表占用8个单元宽度。


    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
        chart.update([cfgA, cfgB, cfgC, cfgD, cfgE])


    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));
    }
}

简单的画图例子。


    javascript
    
    
// 这个chart在JavaScript语言中是对象，在使用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
        // 取得最后成交价，为了2条线不重合在一起，我们加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": "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": "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;
        // 取得最后成交价，为了2条线不重合在一起，我们加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);
    }
}

三角函数曲线画图例子。


    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()
        // 每5秒角度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);
    }
}

使用混合图表的复杂例子。


    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);
    }
}

图表中pie类型的图是没有时间轴的图表，在更新数据时需要直接更新图表配置。例如以上范例中的代码，更新数据后使用c.update(chartCfg)更新图表，如下所示。


    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));

返回值

类型	描述
object	图表对象，见`Chart-return`。

参数

名称	类型	必填	描述
options	object / object数组	是	图表配置。`Chart()`函数的参数`options`是可以`JSON`序列化的`HighStocks`的`Highcharts.StockChart`参数。比原生的参数增加一个`__isStock`属性，如果指定`__isStock:false`，则显示为普通图表。如果设置`__isStock`属性为假值例如：`false`，即使用的图表为`Highcharts`图表。如果设置`__isStock`属性为真值例如：`true`，即使用的图表为`Highstocks`图表（默认`__isStock`为真值，例如`true`）。可以查询HighStocks图表库。

参考

KLineChart

备注

Chart()返回的图表对象有add()、reset()、update()、del()四个方法，分别用于写入数据、清空数据、更新配置、删除数据系列或整张图表，参数见Chart-return。