我正在使用HighCharts和Angular highcharts-ng指令。我采取的大多数行动都有可能导致价格线消失,或者更确切地说,不显示。
^以上%基于感觉:(
^另请注意,焦点时间线导航器内的折线图也会消失。此外,如果将鼠标悬停在图表上,则会显示缺失行的点。
下面是图表的样子(但焦点线也在下面):
我正在使用的图表是一种多图表,其中我有1个折线图(股票价格)和最多3个区域图表,用于绘制其他数据。我也在使用highstocks 4.2.0。我们的应用程序非常复杂,难以在plunkr中复制。
generateChartObject();
function generateChartObject() {
// Create the chart
vs.chartConfig = {
options: {
ignoreHiddenSeries: false,
credits: { enabled: true, text: 'tickertags' },
legend: {
itemStyle: {
color: "#333333",
cursor: "pointer",
fontSize: "10px",
fontWeight: "normal"
},
enabled: true,
floating: true,
align: 'left',
verticalAlign: 'top',
x: 60
},
chart : {
title: { text: '' },
subtitle: { text: '' },
renderTo: 'chart1',
zoomType: 'x',
events: {
load: function () {
broadcastChartloaded();
vs.chartObject.hideLoading();
}
}
},
scrollbar: {
enabled: false,
liveRedraw: false
},
navigator : {
enabled: true,
adaptToUpdatedData: true,
series : {
// data : quote_data
}
},
rangeSelector: {
enabled: false,
},
tooltip: {
pointFormatter: tooltipFormatter,
shared: true
},
exporting: { enabled: false },
plotOptions: {
series: {
point: {
events: {
click: afterClick,
}
}
},
area: {
stacking: 'normal',
},
column: {
stacking: 'normal',
}
}
},
exporting: { enabled: false },
useHighStocks: true,
xAxis : {
dateTimeLabelFormats : {
hour: '%I %p',
minute: '%I:%M %p'
},
events : {
afterSetExtremes : afterSetExtremes,
setExtremes : setExtremes
},
minRange: 3600 * 1000 // one hour
},
yAxis: [{ // Primary yAxis
labels: {
format: '${value:.2f}',
style: {
color: '#4C73FF',
}
},
title: {
text: 'Price',
style: {
color: '#4C73FF',
}
}
},
{ // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Mentions',
style: {
color: '#FDE18D'
}
},
labels: {
formatter: volumeFormatter,
style: {
color: '#FDE18D'
}
},
opposite: false
}],
func: function(chart) {
vs.chartObject = chart;
}
};
}
我的图表是如何生成的:
这里在我的tickersController中我广播了哪个自动收报机来绘制一条线到mapController:
$scope.$emit("display.chart", vm.ticker.ticker);
我的highChartsController接收事件并启动它的工作:
$scope.$on("display.chart", function(event, ticker) {
displayChart(ticker)
.then(function (data) {
// console.log('"displayChart TICKER data returned"',data);
vs.chartObject.addSeries({
zIndex: 1000,
showInLegend: true,
yAxis: 0,
type: 'line',
name: ticker,
color: '#4C73FF',
data: data,
dataGrouping: {
enabled: true
}
}, true);
checkForTags();
}).catch(function(error) {
console.error('error', error);
});
}
);
这是displayChart函数,其中Promise等待API GET(promise返回quote_data中的数据):
function displayChart(ticker) {
console.log('displayChart()');
var deferred = $q.defer(),
promise;
if (ticker === undefined) ticker = 'SPY';
vs.ticker = ticker; // Bugged, sometimes ticker is an Object
vs._ticker = ticker; // Quick fix
symbolUrls = {};
var url = '/app/api/tickers/quotes/'+ticker;
symbolUrls[ticker] = url;
promise = ApiFactory.quotes(buildFullUrl('quotes', url)).then(function (data) {
var quote_data = formatQuotes(data, 'quotes');
// Remove any old chart series:
if (!_.isEmpty(vs.chartObject)) {
while(vs.chartObject.series.length > 0)
vs.chartObject.series[0].remove(true);
}
deferred.resolve(quote_data);
});
return deferred.promise;
}
现在回到我的eventListener $scope.$on("display.chart", function(event, ticker) {
在displayChart返回Promise和数据后,我添加了系列,然后调用checkForTags()
:
displayChart(ticker)
.then(function (data) {
// console.log('"displayChart TICKER data returned"',data);
vs.chartObject.addSeries({
zIndex: 1000,
showInLegend: true,
yAxis: 0,
type: 'line',
name: ticker,
color: '#4C73FF',
data: data,
dataGrouping: {
enabled: true
}
}, true);
checkForTags();
function checkForTags() {
var tags = TagFactory.retrieveTickerTags('all');
// Up to 3 tags in the tags Array (The Area graphs):
if (tags.length) {
getTickerTags(tags);
}
}
function getTickerTags(tags) {
prepareTags(tags).then(function(data) {
// Once data comes back from prepareTags, the loop below,
// generates up to 3 tag Area Graphs in the chart:
for (var i = data.length - 1; i >= 0; i--) {
vs.chartObject.addSeries({
showInLegend: true,
zIndex: 900,
yAxis: 1,
type: 'area',
// name: term,
color: lookupColors[i],
data: data[i],
dataGrouping: {
enabled: false
}
}, true);
if (i === 0) {
handleRedraw(); // function below
}
}
})
.catch(function(error) {
console.error('error', error);
});
}
function prepareTags(tags) {
var deferred = $q.defer();
var tagsComplete = 0;
var allTags = [];
// Request ALL Tag series quote data:
for (var i=0; i<tags.length; i++) {
var url = '/app/api/twitter/' + tags[i].term_id;
getTagData(url, tags[i].term, term_positions[tags[i].term_id]).then(function(data) {
// Push tag data into allTags Array:
allTags.push( data );
tagsComplete++;
// When loop is complete, resolve all the Promises:
if (tagsComplete === tags.length) {
deferred.resolve(allTags);
}
});
}
return deferred.promise;
}
function getTagData(url, term, i) {
var e = vs.chartObject.xAxis[0].getExtremes();
var final_url = buildFullUrl(url, Math.round(e.min/1000), Math.round(e.max/1000));
// Response returned:
return ApiFactory.quotes(final_url).then(function(data) {
// Formatted data returned:
return formatQuotes(data);
});
}
// Finally the handlRedraw function is called at the end:
function handleRedraw() {
vs.chartObject.hideLoading();
vs.chartObject.redraw();
}
下面是窗口调整大小功能,向chartController广播一个事件,然后命中restoreChartSize,最后是changePeriodicity:
window.onresize = function(event) {
$scope.$emit("window.resize");
$scope.$emit("restore.chart");
};
function restoreChartSize() {
if (!vs.chartObject.reflowNow) {
vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() {
this.containerHeight = this.options.chart.height || $(this.renderTo).height();
this.containerWidth = this.options.chart.width || $(this.renderTo).width();
this.setSize(this.containerWidth, this.containerHeight, true);
this.hasUserSize = null;
}
}
vs.chartObject.reflowNow();
changePeriodicity(vs.interval);
}
function changePeriodicity(newInterval) {
vs.interval = newInterval;
var rightDate = new Date();
var leftDate = new Date();
if ( newInterval == "hour" ) {
leftDate.setHours(rightDate.getHours()-1);
}
else if ( newInterval == "day" ) {
leftDate.setDate(rightDate.getDate()-1);
}
else if ( newInterval == "week" ) {
leftDate.setDate(rightDate.getDate()-7);
}
else if ( newInterval == "month" ) {
leftDate.setDate(rightDate.getDate()-30);
}
else if ( newInterval == "year" ) {
leftDate.setDate(rightDate.getDate()-365);
}
if (vs.chartObject.xAxis) {
vs.chartObject.showLoading('Loading data...');
vs.chartObject.xAxis[0].setExtremes(leftDate.getTime(), rightDate.getTime());
}
// if (vs.chartObject.loadingShown) {
// handleRedraw();
// }
}
欢迎任何想法或指示!
答案 0 :(得分:1)
我们终于想出来了!!!“
由于某种原因,正是这个tooltipFormatter
函数搞砸了所有内容。
在评论之后,我们无法让价格线消失!仍然不知道为什么这个bug首先发生了:o这里是tooltipFormatter
函数:
function tooltipFormatter(that) {
if (this.color === "#4C73FF" && this.y > 0) {
this.y = '$' + this.y.formatMoney(2);
} else if (this.y > 999) {
this.y = this.y.formatCommas();
}
return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>';
}