如何从MVC动作动态填充highchart jQuery插件?

时间:2010-12-29 08:57:28

标签: jquery asp.net-mvc-2 highcharts

我正在尝试使用Highcharts jQuery插件来创建MVC应用程序中的数据图表。但我需要从Action方法动态获取函数的数据。我怎么能这样做?

以Highcharts网站(http://highcharts.com/documentation/how-to-use)为例:

var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart-container-1',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

如何从动作方法动态获取数据?有人建议我可以使用JSon,但无法指定方式。如果是这种情况,我真的很感激一个简单而具体的例子,因为我对JSon了解不多。

任何帮助表示赞赏!

2 个答案:

答案 0 :(得分:0)

我在使用正在处理的Rails应用程序中格式化动态数据时遇到了一些麻烦。

我最终使用了试验和错误,查看了页面源,直到它看起来像我想要的那样。

series [{
name: "#{@model_name}",
data: #{@model_name.get_some_nested_array.to_json}
}]

所以在页面源代码中它看起来像这样:

series [{
name: "Model Name",
data: [[1, 4], [2, 3], [3, 7]]
}]

答案 1 :(得分:0)