我编写代码以返回图表中的值。我从cryptocompare.com获取数据(示例JSON:link) 使用Highcharts的代码:
[ClientCacheWithEtag(60)]
我不知道原因,但当我将范围更改为$.getJSON("<?php echo $chartURL; ?>", function (data) {
var seriesData = [];
for (i=0; i<data.length; i++) {
seriesData.push({
x: data[i].time,
y: data[i].open,
high: data[i].high,
low: data[i].low,
close: data[i].close,
volumeto: data[i].volumeto
});
}
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
buttons: [
{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 0
},
title: {
text: 'Chart'
},
tooltip:{
formatter: function() {
var point = this.points[0].point,
txt = '';
// workaround display bug.
var emptyline = '<span style="visibility: hidden;">-</span><br/>';
txt += '<span style="font-size: 10px"><b>' + Highcharts.dateFormat('%A, %e %B %Y', point.x) + '</b></span><br/>\n';
txt += emptyline;
console.log(point.close);
// console.log(points);
// console.log(point.point.options/1000);
var curr = 'USD';
txt += "<b>Price</b>: " + point.y + " " + curr +'<br/>';
txt += "<b>Price</b>: " + point.y + " " + curr +'<br/>';
txt += "<b>Close</b>: " + point.close + " " + curr +'<br/>';
txt += "<b>High</b>: " + point.high + " " + curr +'<br/>';
txt += "<b>Low</b>: " + point.low + " " + curr +'<br/>';
txt += "<b>Volume</b>: " + point.volumeto + " " + curr +'<br/>';
return txt;
}
},
series: [{
type: 'spline',
name: 'Coin',
data: seriesData,
lineWidth: 2,
pointInterval: 3 * 24 * 3600 * 1000, // three day
marker: {
enabled: null,
fillColor: "lightblue",
lineColor: "darkblue",
lineWidth: 1,
radius: 4
},
turboThreshold: 0
}]
});
});
时,值All
,high
,low
,close
为volumeto
。
我在JSON中没有空值。使用少量数据,所有值都会正确显示我不知道我做错了什么,该值正在返回undefined
。
这是我的代码:Jsfiddle
答案 0 :(得分:2)
Highstock使用data grouping功能。在对数据进行分组时,在格式化程序中,您无法访问常规点,而是可以对这些值进行修剪和聚合的分组点进行分析。
如果这些点已分组,则它们具有dataGroup属性,该属性包含对获取原始数据有用的信息。
在格式化程序中,您可以执行以下操作:
formatter: function() {
const series = this.points[0].series
let point = this.points[0].point
if (series.hasGroupedData) {
const { start, length } = point.dataGroup
const { cropStart } = series
const points = series.options.data.slice(start + cropStart, start + cropStart + length)
const groupedPoint = points.reduce((prev, curr) => ({
high: Math.max(prev.high, curr.high),
low: Math.min(prev.low, curr.low),
volumeto: prev.volumeto + curr.volumeto
}))
groupedPoint.x = point.x
groupedPoint.y = point.y
groupedPoint.close = points[points.length - 1].close
point = groupedPoint
}
...
答案 1 :(得分:1)
同意@morganfree。
替代方法是使用series.userOptions.data
并根据x
值过滤掉,如下所示:
var currData = point.series.userOptions.data.filter(d => d.x == this.x)[0];
var curr = 'USD';
txt += "<b>Price</b>: " + point.y + " " + curr +'<br/>';
txt += "<b>Close</b>: " + currData.close + " " + curr +'<br/>';
txt += "<b>High</b>: " + currData.high + " " + curr +'<br/>';
txt += "<b>Low</b>: " + currData.low + " " + curr +'<br/>';
txt += "<b>Volume</b>: " + currData.volumeto + " " + curr +'<br/>';
以下是JSFiddle