0

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

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

4

1 回答 1

0

明白了 - 在我们的框架内，我从 dojotoolkit (.org) 获取代码并将其放入我的 2 个文件中。我不知道你的系统是如何设置的，但基本上，无论你的 widget.js 在哪里，都可以使用 javascript，在一个你可以输入将运行的函数的地方。.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 代码的 ==>data-dojo-attach-point="labelNode" 已经将其用作小部件 .js 文件代码的一部分，因此您有责任将“labelNode”与您的小部件匹配用途。这是一些代码，以防您可以将其与您的设置相匹配：

请注意，我的 .html 模板文件名为 Button2.html [因为最初，我的小部件的行为类似于按钮，具有 onClick 功能。现在，我只显示一个图表，但使用相同的小部件代码。注意：我还包括在“定义”列表中，==>“dojox/charting/Chart2D”，尽管现在，当我删除它时，图表仍然有效。我会让你对自己的“定义”列表负责:)。我要说的重点是，“_setLabelAttr: {node: "labelNode", type: "innerText"}”在小部件 .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 模板文件，并使用正确的 .js 代码指向 .html 文件中的节点，如下所示：“_setLabelAttr: {node : "labelNode", type: "innerText"}," - 这应该显示在您的小部件区域，条形图图形中。我会为你交叉手指 8D。

如果您有反馈或问题，我将很乐意尝试回答。gmail 公司的 dcparham。

于 2013-07-22T16:38:18.013 回答