首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网络技术 > 网络基础 >

rails3运用highcharts

2012-12-27 
rails3使用highcharts环境:ruby 1.9.3p0, rails3.2.6?1.到官方网站下载highcharts.js?http://www.highchar

rails3使用highcharts

环境:ruby 1.9.3p0, rails3.2.6

?

1.到官方网站下载highcharts.js?http://www.highcharts.com/download, 下载之后解压缩,将js/highcharts.js拷贝到assets/javascript目录下,然后在application.js文件中引用,//= require highcharts

?

2.在index界面(rails g scaffold student name:sting, age:integer, address:string, sex:string)添加放置图表的div

标签

?

?

<div id="container" style="width: 600px; height: 400px"></div>?

?

3.接着写javascript,在刚加入的div标签下面

?

?

<div id="container" style="width: 600px; height: 400px"></div>?<script type="text/javascript" charset="utf-8">  $(function () {    new Highcharts.Chart({        chart: {            renderTo: 'container',            //alignTicks: false,            type: 'line'        },        title: {          text: "Students"        },        xAxis: {          categories: <%= raw @students.map {|stu| stu.name}.inspect %>,          title: {            text: "Name"          }        },        yAxis: [{            title: {                text: 'age'            },            gridLineWidth: 1        }],        tooltip: {            formatter: function() {                return '<b>'+ this.series.name +'</b><br/>'+                    this.x +': '+ this.y;            }        },        series: [{            data: <%= @students.map {|stu| stu.age}.inspect %>        }]    });});?</script>
?

4.刷新index页面即可,对于Highcharts参数的使用,可以到官方网站上查阅,只要图表能显示出来,自己改一改参数就知道是干什么的了

?

5. 效果图


rails3运用highcharts
?转载请注明:http://michael-roshen.iteye.com/blog/1669734

?

热点排行