Javascript 高图数组:

Javascript 高图数组:,javascript,json,highcharts,Javascript,Json,Highcharts,我只是在玩海图(http://www.highcharts.com)基于rails 3.1.1和HAML的测试应用程序的内部。我对js还是新手,我试图实现highcharts的良好集成 @category_ids_json = Category.all(:conditions => { :income => false},:select => "id").to_json @categories_json = Category.all(:conditions => { :i

我只是在玩海图(http://www.highcharts.com)基于rails 3.1.1和HAML的测试应用程序的内部。我对js还是新手,我试图实现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
在我的控制器中,我设置了一些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}]
data: $.map(category_transactions_sum, function(i, c) { return [c.title, c.amount]; })
现在我被困在初始化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],
       ]
    }]
 });
我的问题是:

  • 我如何遍历category\u transactions\u sum数组,以消除highcharts的“data”声明中的那一堆行。我尝试了一个for循环,但没有成功

  • 有没有更好的方法将数据插入高位图表?Highcharts需要以下格式的数据:

    数据:[ ['Firefox',45.0], [IE',26.8], [Safari',8.5], [Opera',6.2], [“其他”,0.7] ]

  • 有可能这样做吗

    data: [
      myArrayWithPreparedData
    ]
    
    如果是,我将如何构建此阵列


    非常感谢您帮助一位新手。

    我相信您想要这样的东西:

    [{title: "Salary", amount: 50},{title: "Food", amount: 25},{title: "Recreation", amount: 10}]
    
    data: $.map(category_transactions_sum, function(i, c) { return [c.title, c.amount]; })
    
    亚历克斯差点就成功了

    应该是:

    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
        }]
     });
    
    你可以试试这个(对我有用):

    然后在系列中用作:

    chart.addSeries({
        data: showData
    }); 
    

    仍然没有成功。图表没有画出来。生成的数组中的所有元素都未定义。(使用console.log和您提供的代码对其进行了测试)。我感谢你的帮助!我想,在“data:”之后需要方括号,对吗?