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. 效果图
?转载请注明:http://michael-roshen.iteye.com/blog/1669734
?