【问题标题】:Array for Highcharts:Highcharts 数组:
【发布时间】:2011-11-20 00:14:02
【问题描述】:

我只是在基于 rails 3.1.1 和 HAML 的测试应用程序中使用 Highcharts (http://www.highcharts.com)。我对 js 还是很陌生,我试图完成一个很好的 highcharts 集成。

在我的控制器中,我设置了一些用于 highcharts 的 json 数组。

@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 需要这种格式的数据:

    数据:[ ['火狐',45.0], ['IE',26.8], ['Safari',8.5], ['歌剧',6.2], ['其他',0.7] ]

有可能做这样的事情吗?

data: [
  myArrayWithPreparedData
]

如果是,我将如何构建这个数组?

非常感谢您帮助新手。

【问题讨论】:

    标签: javascript json highcharts


    【解决方案1】:

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

    data: $.map(category_transactions_sum, function(i, c) { return [c.title, c.amount]; })
    

    【讨论】:

    • 仍然没有成功。图表未绘制。生成的数组中的所有元素都是未定义的。 (使用 console.log 和您提供的代码对其进行了测试)。我感谢您的帮助!我想,“数据:”之后需要方括号,对吗?
    【解决方案2】:

    你可以试试这个(对我有用):

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

    然后在系列中用作:

    chart.addSeries({
        data: showData
    }); 
    

    【讨论】:

      【解决方案3】:

      亚历克斯几乎拥有它。

      应该是:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-08-18
        • 2018-03-03
        • 2018-03-23
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多