Массив для Highcharts:

Я просто играю с Highcharts (http://www.highcharts.com) внутри тестового приложения на основе rails 3.1.1 и HAML. Я все еще новичок в js, и я пытаюсь добиться хорошей интеграции highcharts.

В моем контроллере я настроил несколько массивов json для использования в highcharts.

@category_ids_json = Category.all(:conditions => { :income => false},:select => "id").to_json
@categories_json = Category.all(:conditions => { :income => false}, :select => "id,title,income").to_json
@transactions_json = Transaction.all(:select => "date,title,amount,category_id").to_json

Из этих переменных экземпляра я фильтрую некоторые значения и создаю новый массив, который я использую для массива данных highcharts:

var category_transactions_sum = new Array();
category_transactions_sum.push({title:categories[c].title, amount: transactions_sum})

Содержимое массива выглядит примерно так:

[{title: "Salary", amount: 50},{title: "Food", amount: 25},{title: "Recreation", amount: 10}]

Теперь я застрял, когда пришло время инициализировать Highcharts. Вот как я инициализирую его прямо сейчас:

$(document).ready(function() {
 chart = new Highcharts.Chart({
    chart: {
       renderTo: 'container'
    },
     series: [{
       type: 'pie',
       name: 'Expenses',
       data: [
          [category_transactions_sum[0].title, category_transactions_sum[0].amount],
          [category_transactions_sum[1].title, category_transactions_sum[1].amount],
          [category_transactions_sum[2].title, category_transactions_sum[2].amount],
          [category_transactions_sum[3].title, category_transactions_sum[3].amount],
          [category_transactions_sum[4].title, category_transactions_sum[4].amount],
          [category_transactions_sum[5].title, category_transactions_sum[5].amount],
          [category_transactions_sum[6].title, category_transactions_sum[6].amount],
          [category_transactions_sum[7].title, category_transactions_sum[7].amount],
          [category_transactions_sum[8].title, category_transactions_sum[8].amount],
          [category_transactions_sum[9].title, category_transactions_sum[9].amount],
          [category_transactions_sum[10].title, category_transactions_sum[10].amount],
          [category_transactions_sum[11].title, category_transactions_sum[11].amount],
          [category_transactions_sum[12].title, category_transactions_sum[12].amount],
          [category_transactions_sum[13].title, category_transactions_sum[13].amount],
          [category_transactions_sum[14].title, category_transactions_sum[14].amount],
          [category_transactions_sum[15].title, category_transactions_sum[15].amount],
          [category_transactions_sum[16].title, category_transactions_sum[16].amount],
          [category_transactions_sum[17].title, category_transactions_sum[17].amount],
          [category_transactions_sum[18].title, category_transactions_sum[18].amount],
          [category_transactions_sum[19].title, category_transactions_sum[19].amount],
          [category_transactions_sum[20].title, category_transactions_sum[20].amount],
          [category_transactions_sum[21].title, category_transactions_sum[21].amount],
          [category_transactions_sum[22].title, category_transactions_sum[22].amount],
          [category_transactions_sum[23].title, category_transactions_sum[23].amount],
          [category_transactions_sum[24].title, category_transactions_sum[24].amount],
          [category_transactions_sum[25].title, category_transactions_sum[25].amount],
          [category_transactions_sum[26].title, category_transactions_sum[26].amount],
       ]
    }]
 });

Мои вопросы:

  1. Как мне перебрать массив category_transactions_sum, чтобы избавиться от этой группы строк внутри объявления «данных» highcharts. Я пробовал цикл for, но это не сработало.

  2. Есть ли лучший способ вставить данные в highcharts? Highcharts нужны данные в следующем формате:

    данные: [['Firefox', 45.0], ['IE', 26.8], ['Safari', 8.5], ['Opera', 6.2], ['Другие', 0.7]]

Можно ли сделать что-то подобное?

data: [
  myArrayWithPreparedData
]

Если да, то как мне построить этот массив?

Большое спасибо за помощь новичку.


javascript json highcharts
person Alex    schedule 20.11.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я считаю, что вы хотите что-то вроде этого:

data: $.map(category_transactions_sum, function(i, c) { return [c.title, c.amount]; })
person Alex Peattie    schedule 20.11.2011
comment
До сих пор нет успеха. График не рисуется. Все элементы внутри сгенерированного массива не определены. (протестировано с помощью console.log и предоставленного вами кода). Я ценю вашу помощь! Я полагаю, квадратные скобки необходимы после данных: я прав? - person Alex; 20.11.2011

arrow_upward
1
arrow_downward

вы можете попробовать это (работает для меня):

temp = $.map(json, function(i) { return [[i.in_time, i.status]]; })         
showData = JSON.parse(JSON.stringify(temp, null, ""));

а затем использовать в серии как:

chart.addSeries({
    data: showData
});
person snowwalker    schedule 23.09.2012

arrow_upward
0
arrow_downward

У Алекса почти получилось.

Должно быть:

someVar = [{title: "Salary", amount: 50},{title: "Food", amount: 25},{title: "Recreation", amount: 10}]
data = $.map(someVar, function(i) { return [[i.title, i.amount]]; })
$(document).ready(function() {
 chart = new Highcharts.Chart({
    chart: {
       renderTo: 'container'
    },
     series: [{
       type: 'pie',
       name: 'Expenses',
       data: data
    }]
 });
person Mark    schedule 20.11.2011