很难理解为什么某些对象无法正常返回:
如果我运行console.log(obj.R)
,它会按预期返回“不同”。如果我运行console.log(obj.g)
,则只返回undefined
。我的目标是返回g
对象的第一个值,例如console.log(obj.g[0])
,并返回值“0.04600”。
按要求提供全部功能:
function buildCandleStickChart_() {
CurrencyDataService.getChartData('BTC', vm_.selectedMarket).
then(function(data) {
// Set a default theme for the entire chart.
anychart.theme({
'defaultFontSettings': {
'fontSize': 12,
'fontFamily': 'Roboto'
}
});
var table = anychart.data.table();
// Map API data to table data.
dataArray = data.response.map(function(obj) {
// Format Date
var formatedDate = moment(obj.time * 1000).format('M-D HH:mm');
return [formatedDate, obj.open, obj.high, obj.low, obj.close, obj.volumeto];
});
// Add API data to table.
table.addData(dataArray);
// Map data to candlesticks.
var mapping = table.mapAs();
mapping.addField('open', 1, 'first');
mapping.addField('high', 2, 'max');
mapping.addField('low', 3, 'min');
mapping.addField('close', 4, 'last');
// Map data to volume bars.
var volMapping = table.mapAs();
volMapping.addField('value', 5);
// Get current lowest price.
var getLowestValue = _.minBy(data.response, 'low');
lowestLow = getLowestValue.low;
// Get current highest price.
var getHighestValue = _.maxBy(data.response, 'high');
highestHigh = getHighestValue.high;
// Scale down the volume bars.
var getHighestVolume = _.maxBy(data.response, 'volumeto');
var highestVolume = getHighestVolume.volumeto;
var getLowestVolume = _.minBy(data.response, 'volumeto');
var lowestVolume = getLowestVolume.volumeto;
// Initialize the chart.
var chart = anychart.stock();
candleStickChartRef = chart;
candleStickPlotRef = chart.plot(0);
// Initialize the candlesticks.
var candleSticks = chart.plot(0).candlestick(mapping);
candleSticks.name(vm_.selectedMarket);
// Toggle chart tooltip
chart.tooltip(false);
// Chart Padding
var padding = chart.padding();
padding.bottom(0);
padding.left(0);
padding.right(88);
padding.top(0);
// Chart Margins
var margin = chart.margin();
margin.bottom(-1);
margin.left(0);
margin.top(-1);
margin.right(0);
// Create custom date time scale.
var dateTimeScale = anychart.scales.dateTime();
var dateTimeTicks = dateTimeScale.ticks();
dateTimeTicks.interval(0, 0, 0, 1);
// Style the X-Axis.
var xAxis = chart.plot(0).xAxis();
xAxis.background('#FFFFFF');
xAxis.height(24);
xAxis.enabled(true);
// Adjust axis labels.
var labels = xAxis.labels();
labels.format(function(value) {
var date = new Date(value.tickValue);
var formattedDate = moment(date).format('MMM DD, HH:mm');
return formattedDate;
});
labels.width(118);
// Apply date time scale.
var scale = chart.xScale();
scale.ticks([{major: {unit: 'minute', count: 15}, minor: {unit: 'second', count: 1}}]);
// Declare the Y-Axis scale.
var yScale = chart.plot(0).yScale();
// Set the position of the Y-Axis values.
var yAxis = chart.plot(0).yAxis(0);
yAxis.orientation('right');
yAxis.drawFirstLabel(true);
yAxis.drawLastLabel(false);
// Set the position of the Y-Axis labels.
var yLabels = chart.plot(0).yAxis().labels();
yLabels.offsetX(0);
yLabels.format(function() {
return this.value.toFixed(vm_.currencySettings[vm_.selectedMarket].decimal);
});
console.log(chart.plot(0).yAxis().labels());
// Horizontal Grid Lines.
chart.plot(0).yGrid().enabled(true);
chart.plot(0).yGrid().stroke('#ced4da', 1);
// Enable current price indicator.
var indicator = chart.plot(0).priceIndicator();
// Set line settings.
indicator.value('last-visible');
indicator.fallingStroke('#ff6b6b');
indicator.fallingLabel({background: '#ff6b6b'});
indicator.risingStroke('#20c997');
indicator.risingLabel({background: '#20c997'});
indicator.label().fontColor('White');
indicator.label().fontFamily('Roboto');
// Initialize the volume bars.
var volumeBars = chart.plot(0);
var volume = volumeBars.column(volMapping).name('Volume');
volume.zIndex(1);
// Create and tune Y-Scale for volume bars.
var extraYScale = anychart.scales.linear();
extraYScale.maximum(highestVolume + (highestVolume * 4));
extraYScale.minimum(lowestVolume);
volume.yScale(extraYScale);
// Enable Legend.
var legend = chart.plot(0).legend();
legend.enabled(false);
// Set legend position.
legend.positionMode('inside');
// Style legend.
legend.position('top');
legend.align('left');
legend.background().enabled(true);
legend.background().fill('#fff', 0.87);
legend.background().stroke('#ced4da', 1);
legend.padding(8);
legend.margin(8);
legend.drag(true);
// Set listener on the chart container.
document.getElementById('chart-left').onclick = function(event) {
mouseHoverHandler_(event);
};
// Event handler to get Y-Axis value on click.
function mouseHoverHandler_(event) {
// X click coordinate on plot.
var y = event.offsetY;
// Plot bounds related to chart container.
var plotHeight = chart.plot(0).yAxis().getPixelBounds().height;
// Plot left margin
var plotTopoffset = chart.plot(0).yAxis().getPixelBounds().top;
// Click on data area.
if (y < plotTopoffset || y > plotTopoffset + plotHeight) {
return;
}
// Get value of click related to yScale.
var ratio = (y - plotTopoffset) / plotHeight;
var value = (yScale.inverseTransform(1 - ratio)).toFixed(8);
// Setting this value triggers watch which will build line.
vm_.chartSelectedSwapRate = parseFloat(value);
}
// Customize the crosshair and yLabel.
chart.crosshair(true);
chart.crosshair().xLabel(false);
chart.crosshair().yLabel().format(function() {
return Number(this.value).toFixed(8);
});
chart.crosshair().xStroke(null);
chart.crosshair().yStroke('#212529', 1);
chart.crosshair().yLabel().fontColor('#fff');
chart.crosshair().yLabel().fontSize(12);
chart.crosshair().yLabel().padding(2);
chart.crosshair().yLabel().hAlign('center');
chart.crosshair().yLabel().width(78);
chart.crosshair().yLabel().fontFamily('Roboto');
chart.crosshair().yLabel().background({
fill: '#212529',
stroke: '#212529'
});
// Toggle the timeline scroller.
chart.scroller().enabled(false);
// Configure the visual settings of the falling candlesticks.
candleSticks.fallingFill('#ff6b6b');
candleSticks.fallingStroke('#ff6b6b', 1, '0', 'round');
// Configure the visual settings of the rising candlesticks.
candleSticks.risingFill('#20c997');
candleSticks.risingStroke('#20c997', 1, '0', 'round');
// Configure the visual settings of the volume bars.
volume.normal().fill('#e9ecef');
// Set the width of candlesticks and volume bars.
chart.plot(0).pointWidth(6);
// Toggle the default contextual menu.
chart.contextMenu(false);
// Enable the custom contextual menu.
// var customContextMenu = anychart.ui.contextMenu();
// Build the custom contextual menu.
// (TODO)jberthelot: Connect these menu actions with the Go Long and Go Short sidebar
// functions.
// customContextMenu.attach(chart);
// customContextMenu.itemsFormatter(function(items) {
// items = {
// 'menu-item-1': {
// 'text': 'Create a Long Cryptoswap',
// 'action': function() {
// alert('You are going Long!');
// }
// },
// 'menu-item-2': {
// 'text': 'Create a Short Cryptoswap',
// 'action': function() {
// alert('You are going Short!');
// }
// }
// };
// return items;
// });
// Add a custom class name to the contextual menu for easier styling.
// customContextMenu.addClassName('custom-context-menu');
// Set the candlestick chart container element.
chart.container('chart-left');
// Initiate the candlestick chart display.
if (vm_.chart) {
vm_.chart.dispose();
}
vm_.chart = chart;
chart.draw();
});
}