JSON-Object as string：使用concat（），eval（）和/或JSON.parse（）？

Question

我想做什么：我想使用Highcharts和最佳代碼樣式顯示圖表。

問題：我的代碼無法讀取/難以調試，因為我將其存儲在變量中。

好吧，我有一個Javascript-Object包含我以后需要的所有信息（類別，y軸值和系列本身，分為正，中和負）。

var testDia = 
{
    name : 'Testname',
    'chartCategories': ['Golf', 'Polo', 'Passat'],
    'chartSeries': 
    {
        'positive': [
                {y:341, url:'http://golf.com?q=positive'},
                {y:487, url:'http://polo.com?q=positive'},
                {y:180, url:'http://passat.com?q=positive'}
        ],
        'neutral': [
                {y:12, url:'http://golf.com?q=neutral'},
                {y:3, url:'http://polo.com?q=neutral'},
                {y:9, url:'http://passat.com?q=neutral'}
        ],
        'negative': [
                {y:222, url:'http://golf.com?q=negative'},
                {y:115, url:'http://polo.com?q=negative'},
                {y:321, url:'http://passat.com?q=negative'}
        ]
    }
}

我的方法是循環使用類別並添加正，中性和負數到單獨的字符串，我將在后面的highcharts-setup中進行評估。

var allPositiveData = '';
var allNeutralData = '';
var allNegativeData = '';

for(var i=0; i < categories.length; i++) {

    var diaPositive = series['positive'][i]['y'];
    var diaNeutral = series['neutral'][i]['y'];
    var diaNegative = series['negative'][i]['y'];

    urlPositive = series['positive'][i]['url'];
    urlNeutral = series['neutral'][i]['url'];
    urlNegative = series['negative'][i]['url'];

    allPositiveData += "{'y': " + diaPositive + ", 'url': '" + urlPositive + "'}, ";
    allNeutralData += "{'y': " + diaNeutral + ", 'url': '" + urlNeutral + "'}, ";
    allNegativeData += "{'y': " + diaNegative + ", 'url': '" + urlNegative + "'}, ";        

} // end of loop

allPositiveData = eval( "[" + allPositiveData.slice(0, -2) + "]" );
allNeutralData = eval( "[" + allNeutralData.slice(0, -2) + "]" );
allNegativeData = eval( "[" + allNegativeData.slice(0, -2) + "]" );

Highcharts-設置

newChart = new Highcharts.Chart({
    chart : {
        renderTo : 'container',
        type: 'column'
    },

    [...] // skipping the rest of the setup

    series: [
    {
        name: 'Positive',
        data: allPositiveData
    }, {
        name: 'Neutral',
        data: allNeutralData
    }, {
        name: 'Negative',
        data: allNegativeData
    }]
});

我認為有幾種方法可以實現我想要的但我想知道一個更好的（可能是面向對象的）解決方案。

http://jsfiddle.net/x8455/

Answer 1

這是你應該怎么做的。

var allPositiveData = []; // You want an array, so start off with an array.

for(var i=0; i < categories.length; i++) {
    var diaPositive = series['positive'][i]['y'];
    urlPositive = series['positive'][i]['url'];
    allPositiveData.push({'y':diaPositive, 'url':urlPositive}); // Add the element to the array.
}

這里的所有都是它的。 您的Highcharts設置的代碼片段可以保持不變。

為了使樣本更短，我只編輯了positive數據的代碼，其余的是相同的，只是一個不同的名稱。

Answer 2

我想你正在嘗試做你已經做過的事情。

你想從你的JSON中為各個類別顯示三個系列，然后讓我們：

你的代碼：

var categories = testDia['chartCategories'];
var series = testDia['chartSeries'];

大！ 現在使用那些變量：

newChart = new Highcharts.Chart({
    chart : {
        renderTo : portletContainer,
        type: 'column'
    },
    ...
    xAxis: {
        categories: categories,
        labels: {
            rotation: -45,
            align: 'right',
        }
    },
    ...
    series: [{
        name: 'Positive',
        data: series.positive // testDia.chartSeries.positive is the same
    }, {
        name: 'Neutral',
        data: series.neutral
    }, {
        name: 'Negative',
        data: series.negative
    }]
});

和工作演示： http ： //jsfiddle.net/x8455/1/