我正在尝试在线条或面积图的工具提示中显示开,高,低,收盘。现在,行和面积图的数据正在一个看起来像这样的JSON数组中发送
{timestamp, close}
现在,对于OHLC或烛台图表,此JSON更改为
{timestamp,open, high, low, close}
我尝试过这种只适用于OHLC和烛台的方法。
tooltip: {
valueDecimals: 2,
useHTML: true,
formatter: function() {
/*
* tooltip formatter function
*
*/
var d = new Date(this.x);
var s = '';
if (chartGlobalOptions.range.indexOf("m") >= 0) {
s += '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b><br />';
} else {
s += '<b>' + Highcharts.dateFormat('%b %e, %Y [%H:%M]', this.x) + '</b><br />';
}
$.each(this.points, function(i, point) {
if (point.series.name.indexOf("Volume") >= 0) {
/*
* if the series is volume, then don't show the decimals
*
*/
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' </span>' + ' : ' + Highcharts.numberFormat(point.y, 0) + '</b><br />';
} else if (point.series.type == 'candlestick' || point.series.type == 'ohlc') {
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' : ' + Highcharts.numberFormat(point.point.close, 3) + '</b><br />';
s += '<span style ="color:' + point.series.color + ';">Open</span>: ' + point.point.open +
'<br/><span style ="color:' + point.series.color + ';">High</span>: ' + point.point.high +
'<br/><span style ="color:' + point.series.color + ';">Low</span>: ' + point.point.low +
'<br/><span style ="color:' + point.series.color + ';">Close</span>: ' + point.point.close + '<br/>';
}
else {
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' </span>' + ' : ' + Highcharts.numberFormat(point.y, 3) + '</b><br />';
}
});
return s;
},
shared: true
},
为了在折线图的工具提示中显示ohlc值,需要进行哪些修改?我一直试图找到一个解决方案很长一段时间没有任何成功。
谢谢,
Maxx的
修改
这是我正在设置的系列选项
series: [{
type: chartGlobalOptions.chartTypes.name,
name: $('#symbol-name').text(),
data: data.prices,
id: 'Price Axes',
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: data.volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits,
approximation: 'close'
}
}]
以下是我从服务器获取的数据。
{"prices":[{"x":1387377184000,"y":1.05,"high":1.06,"low":1.05,"open":1.06,"close":1.05},{"x":1387377509000,"y":1.04,"high":1.06,"low":1.04,"open":1.05,"close":1.04},{"x":1387378295000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387379370000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387380217000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381181000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381324000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387382146000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387383229000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03}],
"volume":[[1387377184000,0],[1387377509000,35600],[1387378295000,0],[1387379370000,25300],[1387380217000,0],[1387381181000,0],[1387381324000,4500],[1387382146000,1700],[1387383229000,4000],[1387383788000,2600],[1387384004000,1000],[1387384218000,2900],[1387385045000,0],[1387385840000,10000],[1387386013000,100],[1387386627000,6200],[1387386981000,0],[1387387439000,2500],[1387387728000,2500],[1387387950000,0],[1387388920000,0],[1387389210000,500],[1387389890000,15500],[1387390124000,400],[1387390988000,11900],[1387391264000,4900],[1387391832000,0],[1387392803000,0],[1387393369000,6200],[1387393774000,200],[1387394744000,0],[1387395716000,0],[1387395904000,2800],[1387396334000,15000],[1387396689000,0],[1387397664000,0],[1387398328000,12300],[1387398706000,7000],[1387400379000,13000],[1387463638000,0],[1387464573000,46200],[1387465371000,4000],[1387465588000,0],[1387465948000,33000],[1387466607000,0],[1387466883000,11400],[1387468648000,13500],[1387470272000,12800],[1387470693000,0],[1387471718000,0],[1387472674000,0],[1387472742000,0],[1387473768000,100],[1387474795000,0],[1387475319000,29500],[1387475698000,99100],[1387475822000,14400],[1387476297000,3400]]}
以下是我在服务器中设置数据的方法
$this->price[] = array (
$eachRow[ "timestamp" ] * 1000 ,
$eachRow[ "close" ] * 1 ,
$eachRow[ "high" ] * 1 ,
$eachRow[ "low" ] * 1 ,
$eachRow[ "open" ] * 1 ,
$eachRow[ "close" ] * 1
) ;
return json_encode ( array (
"prices" => $this->resultArray[ "prices" ] ,
"volume" => $this->resultArray[ "volume" ] ));
我从服务器获取值后刚开始var data = JSON.parse(data);
。请让我知道我的程序有什么问题。我的意思是如果我直接在数据对象中硬编码相同的值,我得到正确的结果。
答案 0 :(得分:2)
您需要将该信息添加到您的积分中,例如:
series: [{
//type : 'ohlc',
name: 'AAPL Stock Price',
data: [{
x: 1367884800000,
y: 100,
high: 150,
low: 90,
close: 120,
open: 100
}, {
x: 1367984800000,
y: 120,
high: 170,
low: 120,
close: 160,
open: 120
}, {
x: 1368084800000,
y: 160,
high: 160,
low: 90,
close: 120,
open: 160
}]
}]
jsFiddle演示:http://jsfiddle.net/UTsT4/
注意:当你有很多分数并且将使用dataGrouping时,点信息(opten / high / low / close)将会丢失。所以这只适用于已禁用的dataGrouping。