我找不到任何描述使用 C3 库创建 Dojo Widget 的示例。
在尝试创建小部件之前,我尝试创建一个模块,并且它成功了。
我是 Dojo 新手...所以这是我尝试使用 c3 创建小部件的内容:
require([
"dojo/_base/declare", "dojo/parser", "dojo/dom-construct", "dojo/ready", "dojo/_base/window",
"dijit/_WidgetBase", "d3/d3", "c3/c3"
],function(declare, parser, domConstruct, ready, win, _WidgetBase, d3, c3){
declare("LineChart", [_WidgetBase], {
_options: {
bindTo : '#kpi1_chart',
data : {
columns : [
['data', 23, 50, 22, 41, 10]
]
},
zoom :{
enabled : true
}
},
_chart: undefined,
constructor: function(params, srcNodeRef){
if(params.hasOwnProperty('id'))
this._options.bindTo = "#"+params.id;
else
console.log("widget LineChart : id couldn't be found");
},
buildRendering: function(){
this._chart = c3.generate(this._options);
}
});
ready(function(){
parser.parse();
});
});
这是我如何在 HTML 中初始化小部件
<div id="kpi1_chart" data-dojo-type="LineChart"></div>
当我启动页面时,div 标签只是空的,我没有收到任何错误,你能帮忙吗?
最佳答案
我让声明部分工作了。
问题是 c3.js 在内部仅使用“d3”和“c3”作为模块名称,因此如果模块名称前面没有“d3/”,dojo 解析器将在路径中查找“main.js”文件d3”。
因此,为了使用独立模块名称,您需要在 dojoConfig 变量中配置包,如下所示。
packages:[
{
name: "d3",
location: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6',
main:"d3"
},
{
name: "c3",
location: '//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10',
main:"c3"
}
这里的技巧是指定 main 属性。当您指定 main 属性时,当仅在 "d3"
中指定时,dojo 加载器将查找 d3.js
而不是 main.js
模块名称。
我可以让它与声明一起工作,并且正在调用c3.generate(),但无法获取任何图表。我想我缺少一些 css 文件。我对c3.js了解不多。
这是link参见 dojo 加载器如何工作的文档。
希望您能从这里走得更远。
关于javascript - 如何使用 C3 创建 Dojo Widget,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30664043/