日期:2014-05-16 浏览次数:20678 次

应用:http://www.highcharts.com/demo/pie-basic
思路很不错
def all_courses_select_apply_pie
@courses = CourseIntent.intent_course_ranking
stat = {
:notfull => 20, :full => 9, :over => 8, :empty => 11
}
render :json => stat
end
.chart
.page-chart.all-courses-select-apply-pie
jQuery ->
jQuery('.page-chart.all-courses-select-apply-pie').each ->
$chart = jQuery(this)
jQuery.ajax
url: '/charts/courses/all_courses_select_apply_pie'
success: (res)->
notfull = res.notfull
over = res.over
full = res.full
empty = res.empty
option =
chart:
plotBackgroundColor: null
plotBorderWidth: null
plotShadow: false
backgroundColor: null
title:
text: null
plotOptions:
pie:
allowPointSelect: false
showInLegend: true
cursor: 'pointer'
series: [
{
type: 'pie'
name: '课程数'
animation: false
# point:
# events:
# click: (e)->
# location.href = "/manage/courses?select_apply_status=#{this.label}"
dataLabels:
format: '<b>{point.name}</b>: {point.y}'
color: 'black'
distance: 25
style:
fontSize: '15px'
fontWeight: 'bold'
data: [
{
label: 'notfull'
name: '人数过少'
y: notfull
color: '#FEF093'
},
{
label: 'over'
name: '人数过多'
y: over
color: '#cc3333'
},
{
label: 'full'
name: '人数适合'
y: full
color: '#80CC00'
},
{
label: 'empty'
name: '无人选'
y: empty
color: '#CDCDCD'
},
]
}
]
$chart.highcharts option