2014-02-19 2 views
0

Что я хочу сделать: Я хочу отобразить диаграмму с использованием Highcharts и наилучшего стиля кода.JSON-Object as string: использование concat(), eval() и/или JSON.parse()?

Проблема: Мой код нечитабельно/трудно отлаживать, потому что я храню его в переменных.

У меня есть объект Javascript, содержащий всю информацию, необходимую для последующего использования (категории, значение оси 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-установки.

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/

+1

"У меня есть статический JSON-объект" - это объект JavaScript. – Quentin

+2

Я действительно не уверен, что вы пытаетесь сделать, но это почти наверняка должно включать «Просто создание объектов/массивов», а не «Программирование JSON путем избиения строк вместе, а затем их вычисления или анализа». – Quentin

+0

FYI, вопросы, требующие мнения и обсуждения относительно того, что является «лучшим», обычно не поощряются. –

ответ

1

Я думаю, вы пытаетесь сделать что-то, что уже сделали.

Вы хотите, чтобы получить дисплей три серии из вашего 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/

+0

Спасибо Pawel. Вы совершенно правы. Я пропустил лес за деревьями;) – Manticore

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, остальное то же самое, просто другое имя.

+0

Спасибо Cerbrus за ваши усилия. Я узнал кое-что благодаря вам :) – Manticore