चार्ट ड्राइंग फ़ंक्शन को अनुकूलित करें.
चार्ट वस्तु। वस्तु
चार्ट (विकल्प)
..optionsपैरामीटर चार्ट विन्यास है।Chart()कार्य पैरामीटरoptionsहैJSONक्रमबद्ध करने योग्यHighStocksपैरामीटर के लिएHighcharts.StockChart. एक अतिरिक्त__isStockविशेषता मूल पैरामीटर पर जोड़ा जाता है, और अगर__isStock:falseनिर्दिष्ट है, यह एक सामान्य चार्ट के रूप में प्रदर्शित किया जाता है।__isStockविशेषता गलत मान पर सेट है, उदाहरण के लिएfalse, यानी इस्तेमाल किया गया चार्ट एकHighchartsचार्ट।__isStockविशेषता एक सही मान पर सेट है, उदाहरण के लिएtrue, यानी इस्तेमाल किया गया चार्ट एकHighstocksचार्ट (डिफ़ॉल्ट रूप से)__isStockसच है जैसेtrue) से पूछ सकते हैं।हाईस्टॉक्स चार्ट लाइब्रेरी.
विकल्प
सच
वस्तु, वस्तु सरणी
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});
}
}
बहु-चार्ट ड्राइंग कॉन्फ़िगरेशनः
extension.layoutविशेषता
यदि विशेषता को extension.heightविशेषता
विशेषता का उपयोग चार्ट की ऊंचाई को सेट करने के लिए किया जाता है, या तो एक संख्यात्मक मान के रूप में, या extension.colविशेषता
विशेषता का उपयोग चार्ट की चौड़ाई निर्धारित करने के लिए किया जाता है, पृष्ठ की चौड़ाई 12 कक्षों में विभाजित है, सेट 8,यानी, चार्ट 8 कक्षों की चौड़ाई पर कब्जा कर लेता है।// 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);
}
}
सरल चित्र का उदाहरण:
// 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);
}
}
त्रिकोणमितीय वक्र चित्रण का उदाहरण:
/*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;
}
}
हाइब्रिड चार्ट के प्रयोग के जटिल उदाहरण:
// 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);
प्रकार के चार्टpieएक समयरेखा के बिना चार्ट हैं, और आप डेटा अद्यतन करते समय सीधे चार्ट विन्यास अद्यतन करने की जरूरत है. उदाहरण के लिए ऊपर उदाहरण में कोड का उपयोग कर चार्ट अद्यतन करता हैc.update(chartCfg)डेटा को अद्यतन करने के बाद, इस प्रकारः
..Chart()फ़ंक्शन चार्ट ऑब्जेक्ट को लौटाता है जिसमें 4 विधियां हैंःadd(), reset(), update(), del().
update()विधि:
दupdate()विधि चार्ट कॉन्फ़िगरेशन जानकारी को अपडेट कर सकती है। इस विधि का पैरामीटर चार्ट कॉन्फ़िगरेशन ऑब्जेक्ट (JSON) है।del()विधि:
दdel()विधि पारित श्रृंखला पैरामीटर के आधार पर निर्दिष्ट सूचकांक की डेटा श्रृंखला को हटा सकती है.add()विधि:
दadd()विधि चार्ट में निम्नलिखित मापदंडों के क्रम में डेटा लिख सकती है:series: डेटा श्रृंखला सूचकांक सेट करने के लिए प्रयोग किया जाता है, जो एक पूर्णांक है।data: लिखने के लिए विशिष्ट डेटा सेट करने के लिए प्रयोग किया जाता है, यह एक सरणी है।index(वैकल्पिक): डेटा सूचकांक सेट करने के लिए उपयोग किया जाता है, यह एक पूर्णांक है। संशोधित डेटा की विशिष्ट सूचकांक स्थिति निर्दिष्ट करें, और यह नकारात्मक संख्याओं का समर्थन करता है, सेटिंग है-1डेटा सेट के अंतिम डेटा को संदर्भित करता है।
उदाहरण के लिए, एक रेखा खींचते समय, रेखा के अंतिम बिंदु पर डेटा को संशोधित करेंःchart.add(0, [1574993606000, 13.5], -1), यानी, चार्ट के अंतिम से पहले बिंदु पर डेटा बदलseries[0].data.
दindexपैरामीटर सेट नहीं किया गया है, जिसका अर्थ है कि डेटा वर्तमान डेटा श्रृंखला के अंतिम बिंदु में जोड़ा जाता है।reset()विधि:
दreset()चार्ट डेटा को खाली करने के लिए विधि का प्रयोग किया जाता है।reset()विधि एक पैरामीटर ले सकता हैremainरखने के लिए प्रविष्टियों की संख्या निर्दिष्ट करने के लिए कोई पैरामीटरremainसभी डेटा को साफ़ करने के लिए पारित किया जाता है।{@मज़ा/लॉग/KLineChart KLineChart}
सक्षम करेंLog KLineChart