如何使用面积图实现市场深度图 Example image click here
谁能帮我，我需要下面的图表
我已经尝试使用 Highcharts 、X、Y 点在合法网站中启动的以下代码如何设置图表中心的点。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Depth Chart</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(function () {
$.getJSON('http://localhost/bitcocyrus/market_depth/1', function (data) {
console.log(data);
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Market depth'
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: true,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Volume'
},
labels: {
formatter: function () {
return this.value ;
}
}
},
tooltip: {
pointFormat: '{point.y} BTC at {point.x} CNY'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{ name: 'ask', data: data.buy_order }, { name: 'bid', data: data.sell_order }]
});
});
});
//]]>
</script>
</head>
<body>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
</body>
</html>
请检查以下 json 格式
{"buy_order":"[1]","sell_order":"[1,10]"}
最佳答案
使用下面的解决方案，它完全有效。
您需要买单金额或单位的累计总和，按买单价格升序排列。
您再次需要卖单金额或单位的累计总和，即按卖单价格降序排列。
将 1 和 2 的结果合并到一个查询中
使用此代码创建 Highcharts 。
函数 DepthChart(apilink, 基础, 计数器){ $.getJSON(apilink + '/Chart/depthchart?Base=' +base + '&Counter=' +counter + '&Depth=100', 函数 (depthChartJSON) {
$(function () {
$('#depthgraphContainer').highcharts({
chart: {
backgroundColor: "#000d1d",
marginTop: 75,
type: 'area',
animation: true,
marginBottom: 100,
marginLeft: 100,
marginRight: 100,
marginTop: 100,
zoomType: 'x',
// spacingLeft: 100,
// spacingRight: 100,
// spacingTop: 100,
// spacingBottom: 100
},
title: {
text: '',
//y: 40
},
// subtitle: {
// text: 'Drag mouse to zoom'
// },
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
gridLineWidth: 0.1,
// tickPixelInterval:500,
// minorTickInterval: 'auto',
// minorTickColor: '#FEFEFE',
// title: {
// text: 'Price',
// style: {
// color: '#666',
// }
// },
},
yAxis: {
gridLineWidth: 0.1,
// tickPixelInterval:500,
// minorTickInterval: 'auto',
// minorTickColor: '#FEFEFE',
title: {
text: '',
// style: {
// color: '#666',
// }
},
},
legend: {
symbolWidth: 12,
symbolRadius: 60,
align: 'center',
verticalAlign: 'bottom',
//y: 500,
floating: true,
backgroundColor: '#262c38',
itemStyle: {
color: '#666'
},
itemHoverStyle: {
color: '#999'
}
},
plotOptions: {
series: {
lineWidth: 1,
animation: true,
marker: {
enabled: false,
symbol: 'circle',
states: {
hover: {
enabled: true
}
}
}
}
},
tooltip: {
crosshairs: [true, true],
formatter: function () {
return 'Price <b>' + this.x + '</b> <br/>' + this.series.name + '<b>' + this.y + '</b>';
}
},
series: [
{
name: 'Buy orders',
data: depthChartJSON.bids,
color: 'rgba(1,170,120,1.0)',
fillColor: 'rgba(1,170,120,0.2)'
},
{
name: 'Sell orders',
data: depthChartJSON.asks,
color: 'rgba(255,95,115,1.0)',
fillColor: 'rgba(255,95,115,0.2)'
}
]
});
});
});
}
关于jquery - 如何使用highchart整合市场深度图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48621277/