Question

任何人都可以与此相关：我需要一个 工作示例 Dojox图表小部件，充满文件结构，文件名和如何启动小部件？我有一个工作框架，有工作小部件，但我很难理解如何将Dojox图表小部件示例放入此系统。已经花了很多时间和几天尝试使用Demo工作的许多教程，然后“查看源代码” - HTML页面有效。但如何在目录中设置文件并运行小部件？

我真的很感激某人的回答，或者对你相信的教程的引用。谢谢!!!

Answer 1

知道了 - 在我们的框架中，我从dojotoolkit（.org）获取代码并将其放入我的2个文件中。我不知道你的系统是如何设置的，但基本上，无论你的widget.js在哪里，都要使用javascript，在你可以输入将运行的函数的地方。你的widget模板/ .html文件的任何地方都会出现.html代码。我会把你的路径/目录留给你。这是一个dojox条形图的示例，分别为“widget”.js和“template”.html文件提供关联的.js和.html：

//.js widget code:

    require([
             // Require the basic chart class
            "dojox/charting/Chart",

            // Require the theme of our choosing
            "dojox/charting/themes/MiamiNice",

            // Charting plugins:

            //  We want to plot Columns
            "dojox/charting/plot2d/Columns",

            //  We want to use Markers
            "dojox/charting/plot2d/Markers",

            //  We'll use default x/y axes
            "dojox/charting/axis2d/Default",

            // Wait until the DOM is ready
            "dojo/domReady!"
        ], function(Chart, theme) {

            // Define the data [
            var chartData = [10000,10000,10000,12000,12000,12000,14200,14200,14200,10000,10000,10000];
            // Create the chart within its "holding" node
            var chart = new Chart("chartNode");

            // Set the theme
            chart.setTheme(theme);

            // Add the only/default plot
            chart.addPlot("default", {
                type: "Columns",
                markers: true,
                gap: 5
            });

            // Add axes
            chart.addAxis("x");
            chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });

            // Add the series of data
            chart.addSeries("Monthly Sales",chartData);      
            // Render the chart!
            chart.render();

        });
<!-- .html template file code -->

<div data-dojo-attach-point="parentNode" role="presentation" tabindex="0" data-dojo-attach-event="onkeypress:onKeyPress, onclick : onClick, onclick : onSelect">
   <div id="myDialog" class="content">
      <div class="decoration"><span class="image" data-dojo-attach-point="iconNode"></span></div>
      <div data-dojo-attach-point="labelNode" role="button" aria-selected="false">

        <!-- <div id="CircularGauge" ></div> -->
        <!-- <div id="SemiCircularGauge" ></div> -->
        <div id="chartNode" style="width:280px;height:280px;"></div>

      </div>
   </div>
</div>

注意!!!：.html代码的==＆gt; data-dojo-attach-point =“labelNode”已将此作为widget .js文件代码的一部分使用，因此您负责匹配“labelNode”无论你的小部件使用什么。这里有一些代码，以防你可以将它与你的设置相匹配：

请注意，我的.html模板文件名为Button2.html [因为最初，我的小部件表现得像一个按钮，使用onClick 功能。现在，我只显示图表，但使用其他方式相同的小部件代码。注意：我还包含在“定义”列表中，==＆gt; “dojox / charting / Chart2D”，虽然现在，当我删除它时，图表仍然有效。我将让你负责你自己的“定义”列表:)。我正在制作的主要观点是“_setLabelAttr：{node：”labelNode“，键入：“innerText”}，“在widget .js文件中使用”labelNode“，它对应于.html模板文件。

define([
   "dojo/_base/declare",
   "dojo/_base/event",
   "dojo/_base/lang",
   "dojo/dom-attr",
   "dojo/dom-class",
   "dojo/dom-style",
   "dojo/keys",
   "dojo/text!theme/html/Button2.html",
   "dijit/_Widget",
   "dijit/_TemplatedMixin",
   "dijit/_Contained",
   "com/tgcs/tcx/gravity/base/JSBeanWidget",
   "dojox/charting/Chart2D",
   "dojo/parser",
   "dojo/ready",
   "dijit/_WidgetBase"],
function(declare, event, lang, domAttr, domClass, domStyle, keys, template, _widget, _templated, _contained, JSBeanWidget, Chart2D, parser, ready, _WidgetBase)
{

    var module = declare("um, ur path to your widget file goes here, which has periods, and ends in something like ... ==>.widget.AssociateInfoPost", [_widget, _templated, _contained, JSBeanWidget, _WidgetBase],
   {
      label: "",
      tooltip: "",
      visible: true,
      enabled: true,
      //templateString: template,
      templateString: template,
      langType: "active",
      actionId: "noop",
      isListener: false,
      baseClass: "xcButton",
      _setTooltipAttr: {node: "parentNode", type: "attribute", attribute: "title"},   //called by _WidgetBase
      _setLabelAttr: {node: "labelNode", type: "innerText"},

所以，基本上，正确的.js代码+正确的.html代码允许.js指向.html模板文件，并使用指向.html文件中的节点的正确.js代码，如下所示：“_ setLabelAttr ：{node：“labelNode”，键入：“innerText”}，“ - 这应显示在窗口小部件区域，条形图图形。我会为你指责8D。

如果您有任何反馈或问题，我将很乐意尝试回答。点击gmail c o m。

需要一个实际的Dojox图表小部件示例，包括工作文件结构

1 个答案: