我找不到任何描述使用C3库创建Dojo Widget的示例。
在尝试创建一个小部件之前,我尝试创建一个模块,它起作用了。
我是Dojo的新手......所以我试图用c3创建一个Widget:
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标签只是空的,我没有收到任何错误,你能帮忙吗?
答案 0 :(得分:1)
我得到了声明部分的工作。
问题是内部c3.js只使用&#34; d3&#34;和&#34; c3&#34;作为模块名称,因此dojo解析器将查找&#39; main.js&#39;如果模块名称不在&#34; d3 / d3&#34;之前,则在路径中输入文件。
因此,为了使用独立模块名称,您需要在 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属性时,当模块名称中仅指定d3.js
时,dojo加载器将查找main.js
而不是"d3"
。
我可以使用declare并且正在调用 c3.generate(),但无法获取任何图表。我想我错过了一些css文件。我对c3.js了解不多。
以下是关于dojo加载器如何工作的文档的link。
希望你能从这里继续下去。
答案 1 :(得分:1)
我会回答我的问题:
为了能够在dojo Widget中显示 C3 图表,您必须在 startup()函数中生成图表。
如果您尝试在 startup()之前的另一个函数中生成图表C3 例如,在小部件生命周期中,例如 postCreate(),您无法将 c3 绑定到同一小部件的DOM元素,因为此元素尚不存在。< / p>