如何使用 C3 创建 Dojo 小部件

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 内部仅使用 "d3" 和 "c3" 作为模块名称，因此如果模块名称是 dojo 解析器，则会在路径中查找 'main.js' 文件名称不以 "d3/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。

我可以让它与 declare 一起工作，并且正在调用 c3.generate()，但无法获得任何图表。我想我缺少一些 css 文件。我不太了解c3.js。

这是关于 dojo 加载程序如何工作的文档的link。

希望你能从这里走得更远。

Answer 2

我会回答我的问题：

为了能够在 dojo Widget 中显示 C3 图表，您必须在 startup() 函数中生成图表.

如果您尝试在 startup() 之前的另一个函数中生成图表 C3 在像 postCreate() 这样的小部件生命周期中，您不能将 c3 绑定到 DOM 元素（同一个小部件）因为这个元素还不存在。

如何使用 C3 创建 Dojo 小部件

How to Create Dojo Widget using C3

javascript

dojo

widget

c3