Question

我找不到任何描述使用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标签只是空的，我没有收到任何错误，你能帮忙吗？

Answer 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。

希望你能从这里继续下去。

Answer 2

我会回答我的问题：

为了能够在dojo Widget中显示 C3 图表，您必须在 startup（）函数中生成图表。

如果您尝试在 startup（）之前的另一个函数中生成图表C3 例如，在小部件生命周期中，例如 postCreate（），您无法将 c3 绑定到同一小部件的DOM元素，因为此元素尚不存在。< / p>

如何使用C3创建Dojo小部件

2 个答案: