我正在使用rails,并收集一些数据来制作饼图。我只是使用ruby对象(所以没有JSON),并使用d3pie。首先,我做了一个辅助函数。然后我使用该帮助器创建一个javascript函数,并将其传递给dom。这是我的代码;
helper.rb
def options_data_to_d3(options_data)
d3_data = []
options_data.each do |key, value|
d3_data.push( { label: key.option.as_json, value: value.as_json } )
end
return JSON.pretty_generate(d3_data)
end
这将获取ruby哈希值,并使其成为json
js功能
function dataPieChart(id, data) {
var config = {
"header": {
"title": {
"text": "Quiz Questions",
"fontSize": 18,
"font": "verdana"
},
"size": {
"canvasHeight": 400,
"canvasWidth": 500
},
"data": {
"content": data
},
"labels": {
"outer": {
"pieDistance": 32
}
}
}
}
var pie = new d3pie(id, config);
}
传入视图
<div id="quizQuestionOptionPie<%= question.id %>"></div>
<script type="text/javascript">dataPieChart("quizQuestionOptionPie<%= question.id %>", <%= raw options_data_to_d3(data[:options]) %>);
</script>
当我在javascript函数中调用控制台日志以查看数据是什么时,我得到d3pie和d3正在寻找的正确输出,但我仍然得到错误
d3pie error: no data supplied.
有人看到我的代码有问题,或者我错过了什么?任何帮助表示赞赏。
答案 0 :(得分:1)
您的配置选项未正确括号(所有内容都是&#34;标题&#34;的子项)。你的意思是:
var config = {
"header": {
"title": {
"text": "Quiz Questions",
"fontSize": 18,
"font": "verdana"
},
},
"size": {
"canvasHeight": 400,
"canvasWidth": 500
},
"data": {
"content": data
},
"labels": {
"outer": {
"pieDistance": 32
}
}
};