0

当我尝试运行此 Fiddle 时收到错误消息：http: //jsfiddle.net/TkLyM/1/我正在使用来自 github 的 Highcharts 和 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.');
                }
        }
}   
}

自上次工作以来，我已尝试删除添加的代码，但它仍然不显示图表。非常感谢帮助。

4

1 回答 1

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;
}

http://jsfiddle.net/XBAGf/

这至少会给你一个图表，但我想你想查看 fundResults 以获取该系列的所有数据，而不仅仅是第一个元素。

于 2013-10-24T14:58:39.837 回答