Anpassen der Diagrammzeichnungsfunktion.
Chartobjekt. Gegenstand
Tabelle (Optionen)
DieoptionsDie Parameter sind die Diagrammkonfiguration.Chart()Funktionsparameteroptionsist einJSONSerialisierbarHighStocksParameter fürHighcharts.StockChartEin zusätzliches__isStockAttribut über den nativen Parameter hinzugefügt wird, und wenn__isStock:falseWenn die Angabe des Wertes der Werte angegeben wird, wird sie als normales Diagramm angezeigt.__isStockAttribut ist auf einen falschen Wert gesetzt, z. B.false, d. h. das verwendete Diagramm ist einHighchartsDie__isStockAttribut wird auf einen wahren Wert gesetzt, z. B.true, d. h. das verwendete Diagramm ist einHighstocksDiagramm (standardmäßig)__isStockist wahr, z.B.true) Sie können dieHighStocks-Charts-Bibliothek- Ich weiß.
Optionen
wahr
Objekt, Objekt-Array
function main() {
var cfgA = {
extension: {
layout: 'single', // No grouping, display separately, default to group 'group'
height: 300, // Specify the height
},
title: {
text: 'handicap chart'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'buy one',
data: [],
}, {
name: 'sell one',
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],
] // Instead of updating the initial data with the add function, the sequence can be updated by changing the chart configuration directly.
}]
};
var cfgD = {
extension: {
layout: 'single',
col: 8, // Specify the cell value for the width, the total value is 12
height: '300px',
},
title: {
text: 'handicap chart'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'buy one',
data: [],
}, {
name: 'sell one',
data: [],
}]
}
var cfgE = {
__isStock: false,
extension: {
layout: 'single',
col: 4,
height: '300px',
},
title: {
text: 'pie chart2'
},
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 a number of points to the pie chart, add can only update the data points added by add, built-in data points cannot be updated later.
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: 'buy one ' + ticker.Buy + ', sell one ' + ticker.Sell,
};
cfgB.subtitle = {
text: 'spread ' + diff,
};
chart.add([0, [new Date().getTime(), ticker.Buy]]);
chart.add([1, [new Date().getTime(), ticker.Sell]]);
// Equivalent to updating the first data series of the second chart
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 is actually the same as resetting the chart's configuration
chart.update([cfgA, cfgB, cfgC, cfgD, cfgE]);
}
}
import random
import time
def main():
cfgA = {
"extension" : {
"layout" : "single",
"height" : 300,
"col" : 8
},
"title" : {
"text" : "handicap chart"
},
"xAxis" : {
"type" : "datetime"
},
"series" : [{
"name" : "buy one",
"data" : []
}, {
"name" : "sell one",
"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" : "handicap chart"
},
"series" : [{
"name" : "buy one",
"data" : []
}, {
"name" : "sell one",
"data" : []
}]
}
cfgE = {
"__isStock" : False,
"extension" : {
"layout" : "single",
"col" : 4,
"height" : "300px"
},
"title" : {
"text" : "pie chart2"
},
"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" : "buy one" + str(ticker["Buy"]) + "sell one" + 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
void main() {
json cfgA = R"({
"extension" : {
"layout" : "single",
"height" : 300,
"col" : 8
},
"title" : {
"text" : "handicap chart"
},
"xAxis" : {
"type" : "datetime"
},
"series" : [{
"name" : "buy one",
"data" : []
}, {
"name" : "sell one",
"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" : "handicap chart"
},
"series" : [{
"name" : "buy one",
"data" : []
}, {
"name" : "sell one",
"data" : []
}]
})"_json;
json cfgE = R"({
"__isStock" : false,
"extension" : {
"layout" : "single",
"col" : 4,
"height" : "300px"
},
"title" : {
"text" : "pie chart2"
},
"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"] = format("buy one %f , sell one %f", ticker.Buy, ticker.Sell);
cfgA["subtitle"] = cfgASubTitle;
json cfgBSubTitle = R"({"text" : ""})"_json;
cfgBSubTitle["text"] = format("spread %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});
}
}
Konfiguration für mehrere Diagramme:
extension.layoutAttribut
Wenn das Attribut mit dem Wert extension.heightAttribut
Das Attribut wird verwendet, um die Höhe des Diagramms, entweder als numerischen Wert oder als extension.colAttribut
Das Attribut wird verwendet, um die Breite des Diagramms festzulegen, die Seitenbreite wird in 12 Zellen unterteilt, Satz 8, das heißt, das Diagramm nimmt 8 Zellen Breite.// This chart is an object in the JavaScript language, and before using the Chart function, we need to declare an object variable chart to configure the chart. var chart = {
// This field marks whether the chart is a general chart or not, if you are interested, you can change it to false and run it.
__isStock: true,
// Scaling tool
tooltip: {xDateFormat: '%Y-%m-%d %H:%M:%S, %A'},
// title
title : { text : 'spread analysis chart'},
// selection range
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
},
// Coordinate axis horizontal axis that is: x-axis, the current setting type is: time
xAxis: { type: 'datetime'},
// Coordinate axis vertical axis that is: y-axis, default value adjusted with the size of the data
yAxis : {
// title
title: {text: 'spread'},
// Whether to enable the right vertical axis
opposite: false
},
// Data series, this sttribute holds the individual data series (lines, K-charts, labels, etc...)
series : [
// The index is 0, and the data array holds the data of the index series
{name : "line1", id : "line1,buy1Price", data : []},
// Index is 1, set dashStyle:'shortdash' i.e.: set the dashed line
{name : "line2", id : "line2,lastPrice", dashStyle : 'shortdash', data : []}
]
} function main(){
// Call the Chart function to initialize the chart
var ObjChart = Chart(chart)
// Clear out
ObjChart.reset()
while(true){
// Gets the timestamp of this poll, i.e. a millisecond timestamp. It's used to determine the position of the X-axis written to the chart.
var nowTime = new Date().getTime()
// Get the ticker data
var ticker = _C(exchange.GetTicker)
// Get buy one price from the return value of the ticker data
var buy1Price = ticker.Buy
// To obtain the final transaction price, we add 1 in order not to overlap the 2 lines
var lastPrice = ticker.Last + 1
// Data sequence with timestamp as X-value and buy one price as Y-value passed into index 0
ObjChart.add(0, [nowTime, buy1Price])
// ditto
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": "line1,buy1Price", "data": []
}, {
"name": "line2", "id": "line2,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)
void main() {
// When writing strategies in C++, try not to declare global variables that are not of the base type, so the chart configuration object is declared inside the main function.
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": "line1,buy1Price", "data": []
}, {
"name": "line2", "id": "line2,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);
}
}
Beispiel für eine einfache Zeichnung:
// Objects used to initialize the chart
var chart = {
// Chart title
title: {text: "line value triggers the plotLines value"},
// Y-axis related settings
yAxis: {
// A horizontal line perpendicular to the Y-axis, used as a trigger line, is a structural array that can set multiple trigger lines
plotLines: [{
// The value of the trigger line, how much it set, this line will be displayed in the corresponding value position
value: 0,
// Set the color of the trigger line
color: 'red',
// Width
width: 2,
// Displaying labels
label: {
// Label text
text: 'Trigger value',
// Centered label position
align: 'center'
}
}]
},
// X-axis related settings, here the setting type is time axis
xAxis: {type: "datetime"},
series: [
{name: "sin", type: "spline", data: []},
// This is an important data series, you can set multiple data series, according to the array index control
{name: "cos", type: "spline", data: []}
]
}
function main(){
// Circumference
var pi = 3.1415926535897
// Variables for recording timestamps
var time = 0
// Angle
var angle = 0
// Coordinate y values for receiving sine and cosine values
var y = 0
// Call the API interface to initialize the chart with the chart object
var objChart = Chart(chart)
// Initially, clear the chart
objChart.reset()
// Set the value of the trigger line to 1
chart.yAxis.plotLines[0].value = 1
// Loop
while(true){
// Get the timestamp of the current moment
time = new Date().getTime()
// Angle increases by 5 degrees every 500ms and calculates the sine value
y = Math.sin(angle * 2 * pi / 360)
// Write the calculated y value to the data series of the corresponding index of the chart, the first parameter of the add function is the specified data series index
objChart.add(0, [time, y])
// Calculate the cosine value
y = Math.cos(angle * 2 * pi / 360)
objChart.add(1, [time, y])
// Increase by 5 degrees
angle += 5
// Pause for 5 seconds to avoid drawing too often and growing data too fast
Sleep(5000)
}
}
import math
import time
chart = {
"title": {"text": "line value triggers the 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)
void main() {
json chart = R"({
"title": {"text": "line value triggers the 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);
}
}
Beispiel für die Zeichnung einer trigonometrischen Kurve
/*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;
}
}
'''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
/*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;
}
}
Komplexe Beispiele für die Verwendung hybrider Diagramme:
// update pie
chartCfg.series[chartCfg.series.length-1].data = [
["A", Math.random()*100],
["B", Math.random()*100],
];
c.update(chartCfg)
# update pie
chartCfg["series"][len(chartCfg["series"]) - 1]["data"] = [
["A", random.random() * 100],
["B", random.random() * 100]
]
c.update(chartCfg)
// 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);
TypenkartenpieSie müssen die Diagrammkonfiguration direkt beim Aktualisieren der Daten aktualisieren.c.update(chartCfg)nach Aktualisierung der Daten wie folgt:
DieChart()Funktion gibt ein Diagrammobjekt zurück, das 4 Methoden hat:add(), reset(), update(), del().
update()Methode:
Dieupdate()Der Parameter dieser Methode ist das Chart Configuration Object (JSON).del()Methode:
Diedel()Methode kann die Datenreihe des angegebenen Indizes auf der Grundlage des übermittelten Serienparameters löschen.add()Methode:
Dieadd()Diese Methode kann Daten mit folgenden Parametern in der Reihenfolge auf das Diagramm schreiben:series: verwendet, um den Datenreihenindex zu setzen, der eine ganze Zahl ist.data: verwendet, um die spezifischen zu schreibenden Daten festzulegen, es ist ein Array.index(optional): verwendet, um den Datenindex einzustellen, es ist eine ganze Zahl.-1bezieht sich auf die letzten Daten des Datensatzes.
Zum Beispiel, wenn Sie eine Linie zeichnen, ändern Sie die Daten am letzten Punkt der Linie:chart.add(0, [1574993606000, 13.5], -1), d. h. die Daten am vorletzten ersten Punkt des Diagramms ändernseries[0].data- Ich weiß.
DieindexParameter nicht eingestellt ist, was bedeutet, dass die Daten zum letzten Punkt der aktuellen Datenreihe hinzugefügt werden.reset()Methode:
Diereset()Die Methode wird verwendet, um die Diagrammdaten zu entleeren.reset()Methode kann einen Parameter annehmenremainUm die Anzahl der Einträge anzugeben. Keine Parameterremainwird übergeben, um alle Daten zu löschen.Ich bin nicht derjenige, der das Problem hat.
AktivierenLog KLineChart