Highcharts,ROR,如何让标签发挥作用
Highcharts, ROR, how to get labels working
我正试图让标签出现在我的柱状图上。
JavaScript
<%= javascript_tag do %>
window.highchartDATA = '<%= @data %>';
<% end %>
dashboard.html.erb
<script>
$(function () {
$('#notes_chart').highcharts({
chart: {
type: 'column',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
},
},
title: {
text: 'Total Notes By Class Module'
},
subtitle: {
text: 'Source: Notes Table'
},
xAxis: {
categories: [],
title: {
text: null
},
labels: {
overflow: 'justify',
style: {
color: '#FFFFFF',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total Number',
align: 'high'
},
labels: {
overflow: 'justify',
style: {
color: '#FFFFFF',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Number of Notes By Class Module',
data: <%= @data %>
}]
});
});
</script>
备注.rb
def self.getData
data = []
self.subject_types.each do |type|
data << self.type_count(type)
end
data
end
private
def self.subject_types
pluck(:subject_type).uniq
end
def self.type_count(type)
where(subject_type: type).count
end
end
控制器:notes_Controller.rb
def dashboard
@data = Note.highchart_data
end
该图由以下模型填充:
create_table "classmodules", force: :cascade do |t|
t.integer "student_id"
t.string "subject"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
目前这是有效的。但是,我无法将标签显示在柱状图上。如何使标签自动显示?只有1、2、3、4等……谢谢!
您可以:
对于数据,我相信您传递的是一个类型计数数组。由于它是一个一维数组,因此x轴被视为该数组中的位置。
如果您希望主题标签在x轴上,那么您应该以以下格式传递数据[[subject,count]…]。
请参阅:http://api.highcharts.com/highcharts#series.data
相关文章:
- Knockout.JS标签在foreach内部不起作用
- <选择>标签不起作用
- Shoutcast流url在html5音频标签中不起作用
- 带有组件标签的 VueJS 路由不起作用
- jquery on('change'.. 在多个标签中不起作用
- 使用 Div 标签的 location.href 属性时,Eval 不起作用
- 标签在 AngularJS 中不起作用
- jQuery在<TR>TR折叠时标签不起作用
- Svg标签在IE8中不起作用
- Magento Jquery引导程序和原型冲突?导航标签不起作用
- 标签的属性在角度方向上不起作用
- 使用Javascript在模态内部的标签上显示错误消息不起作用
- Chart.js-悬停弹出-添加带值的标签-不起作用
- 数据绑定在带有输入标签的 AngularJS 中不起作用
- Javascript - 在将标签环绕后重新选择文本不起作用?所见即所得
- 当在 img 标签中提到类时,Href 不起作用
- IOS Cordova/Phonegap 离线视频源标签不起作用
- Chrome扩展程序:从标签中提取关键字不起作用
- Symfony - 嵌入表单中的食谱“添加新标签”不起作用
- 标签上的文本修饰不起作用