当我试图运行这个小提琴时，我收到一个错误：http://jsfiddle.net/TkLyM/1/我正在使用Highcharts和来自github的Rainbow对象，但这些都在昨天工作正常。
我的JS：
var fundRevealAnalysis = {"nameOfPortfolio":"Sample","index":"^DJI","indexName":"DowJonesIndustrialAverage","timePeriod":0,"timePeriodUnits":3,"endDate":"2013-11-01","results":[{"fund":"FCNTX","isPortfolio":false,"fundResults":[{"timePeriodStartDate":"2013-01-01","timePeriodEndDate":"2013-11-01","adr":5.0,"volatility":3.0,"wcr":2.0,"rating":"A","pra":25.0,"prb":25.0,"prc":25.0,"prd":25.0},{"timePeriodStartDate":"2013-01-01","timePeriodEndDate":"2013-11-01","adr":4.0,"volatility":1.0,"wcr":3.0,"rating":"B","pra":25.0,"prb":25.0,"prc":25.0,"prd":25.0}]},{"fund":"FMAGX","isPortfolio":false,"fundResults":[{"timePeriodStartDate":"2013-01-01","timePeriodEndDate":"2013-11-01","adr":10.0,"volatility":8.0,"wcr":6.0,"rating":"C","pra":25.0,"prb":25.0,"prc":25.0,"prd":25.0},{"timePeriodStartDate":"2013-01-01","timePeriodEndDate":"2013-11-01","adr":7.0,"volatility":2.0,"wcr":5.0,"rating":"D","pra":25.0,"prb":25.0,"prc":25.0,"prd":25.0}]},{"fund":"Portfolio","isPortfolio":true,"fundResults":[{"timePeriodStartDate":"2013-01-01","timePeriodEndDate":"2013-11-01","adr":11.0,"volatility":9.0,"wcr":2.0,"rating":"A","pra":25.0,"prb":25.0,"prc":25.0,"prd":25.0},{"timePeriodStartDate":"2013-01-01","timePeriodEndDate":"2013-11-01","adr":8.0,"volatility":6.0,"wcr":4.0,"rating":"B","pra":25.0,"prb":25.0,"prc":25.0,"prd":25.0}]}],"validationErrors":["ERROR: This is an error.","WARN: This is a warning."]};
var colors = ['1962c8','3f8700','d3cb4f','eb793e','9d61cc','b50000','b57541','53b000','22767c','083863','76abf9','00a965','ff2a00','646464','969696','c8c8c8','ffca33','7a29fe','f63aff','fe8c00'];
var shapes = ['circle', 'square', 'diamond', 'triangle'];
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Annualized Volatitity vs Average Daily Return Scatter Plot'
},
subtitle: {
text: 'Source: Fundreveal'
},
xAxis: {
title: {
enabled: true,
text: 'Annualized Volatility (%)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines : [{
value : 3,
color : 'green',
dashStyle : 'shortdash',
width : 2,
}]
},
yAxis: {
title: {
text: 'Average Daily Return (%)'
},
plotLines : [{
value : 7.5,
color : 'green',
dashStyle : 'shortdash',
width : 2,
label : {
text : 'S&P500'
}
}]
},
legend: {
layout: 'horizontal',
align: 'center',
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} % Volatility, {point.y} % ADR'
}
}
},
series: getSeries(fundRevealAnalysis)
});
});
function getSeries(analysis){
var series = [];
var rainbow = new Rainbow();
var results = analysis.results;
rainbow.setNumberRange(0, analysis.results.length);
for(var i = 0; i < results.length ; i += 1) {
var thisResult = results[i];
var thisPoint = { name: thisResult.fund,
color: '#' + rainbow.colorAt(i),
data: [[thisResult.fundResults[1].volatility, thisResult.fundResults[1].adr]]};
series[i] = thisPoint;
}
return series;
}
function getMarker(num){
var shape = Math.floor(num/colors.length);
var color = num % colors.length;
return { symbol : shapes[shape],
color : colors[color]};
}
/*
RainbowVis-JS
Released under MIT License
*/
function Rainbow()
{
var gradients = null;
var minNum = 0;
var maxNum = 100;
var colours = ['ff0000', 'ffff00', '00ff00', '0000ff'];
setColours(colours);
function setColours (spectrum)
{
if (spectrum.length < 2) {
throw new Error('Rainbow must have two or more colours.');
} else {
var increment = (maxNum - minNum)/(spectrum.length - 1);
var firstGradient = new ColourGradient();
firstGradient.setGradient(spectrum[0], spectrum[1]);
firstGradient.setNumberRange(minNum, minNum + increment);
gradients = [ firstGradient ];
for (var i = 1; i < spectrum.length - 1; i++) {
var colourGradient = new ColourGradient();
colourGradient.setGradient(spectrum[i], spectrum[i + 1]);
colourGradient.setNumberRange(minNum + increment * i, minNum + increment * (i + 1));
gradients[i] = colourGradient;
}
colours = spectrum;
return this;
}
}
this.setColors = this.setColours;
this.setSpectrum = function ()
{
setColours(arguments);
return this;
}
this.setSpectrumByArray = function (array)
{
setColours(array);
return this;
}
this.colourAt = function (number)
{
if (isNaN(number)) {
throw new TypeError(number + ' is not a number');
} else if (gradients.length === 1) {
return gradients[0].colourAt(number);
} else {
var segment = (maxNum - minNum)/(gradients.length);
var index = Math.min(Math.floor((Math.max(number, minNum) - minNum)/segment), gradients.length - 1);
return gradients[index].colourAt(number);
}
}
this.colorAt = this.colourAt;
this.setNumberRange = function (minNumber, maxNumber)
{
if (maxNumber > minNumber) {
minNum = minNumber;
maxNum = maxNumber;
setColours(colours);
} else {
throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')');
}
return this;
}
}
function ColourGradient()
{
var startColour = 'ff0000';
var endColour = '0000ff';
var minNum = 0;
var maxNum = 100;
this.setGradient = function (colourStart, colourEnd)
{
startColour = getHexColour(colourStart);
endColour = getHexColour(colourEnd);
}
this.setNumberRange = function (minNumber, maxNumber)
{
if (maxNumber > minNumber) {
minNum = minNumber;
maxNum = maxNumber;
} else {
throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')');
}
}
this.colourAt = function (number)
{
return calcHex(number, startColour.substring(0,2), endColour.substring(0,2))
+ calcHex(number, startColour.substring(2,4), endColour.substring(2,4))
+ calcHex(number, startColour.substring(4,6), endColour.substring(4,6));
}
function calcHex(number, channelStart_Base16, channelEnd_Base16)
{
var num = number;
if (num < minNum) {
num = minNum;
}
if (num > maxNum) {
num = maxNum;
}
var numRange = maxNum - minNum;
var cStart_Base10 = parseInt(channelStart_Base16, 16);
var cEnd_Base10 = parseInt(channelEnd_Base16, 16);
var cPerUnit = (cEnd_Base10 - cStart_Base10)/numRange;
var c_Base10 = Math.round(cPerUnit * (num - minNum) + cStart_Base10);
return formatHex(c_Base10.toString(16));
}
formatHex = function (hex)
{
if (hex.length === 1) {
return '0' + hex;
} else {
return hex;
}
}
function isHexColour(string)
{
var regex = /^#?[0-9a-fA-F]{6}$/i;
return regex.test(string);
}
function getHexColour(string)
{
if (isHexColour(string)) {
return string.substring(string.length - 6, string.length);
} else {
var colourNames =
[
['red', 'ff0000'],
['lime', '00ff00'],
['blue', '0000ff'],
['yellow', 'ffff00'],
['orange', 'ff8000'],
['aqua', '00ffff'],
['fuchsia', 'ff00ff'],
['white', 'ffffff'],
['black', '000000'],
['gray', '808080'],
['grey', '808080'],
['silver', 'c0c0c0'],
['maroon', '800000'],
['olive', '808000'],
['green', '008000'],
['teal', '008080'],
['navy', '000080'],
['purple', '800080']
];
for (var i = 0; i < colourNames.length; i++) {
if (string.toLowerCase() === colourNames[i][0]) {
return colourNames[i][1];
}
}
throw new Error(string + ' is not a valid colour.');
}
}
}
}
我已经尝试删除我上次使用的代码，但它仍然没有显示图表。非常感谢。
答案 0 :(得分：0)
我不确切地知道你要做什么，但你的getSeries函数有很多问题：
function getSeries(analysis) {
var series = [];
var rainbow = new Rainbow();
var results = analysis.results;
rainbow.setNumberRange(0, results.length);
for (var i = 0; i < results.length; i++) {
var thisPoint = {
name: results[i].fund,
color: '#' + rainbow.colorAt(i),
data: [
[results[i].fundResults[0].volatility, results[i].fundResults[0].adr]
]
};
series[i] = thisPoint;
}
return series;
}
这至少会为你提供一个图表，但我想你想通过fundResults来查看该系列的所有数据，而不仅仅是第一个元素。