在蜘蛛情节

Question

我使用道场的图形库有一个蜘蛛情节隐藏了一系列默认定义是这样的：

require([ 
    "dojox/charting/Chart", 
    "dojox/charting/themes/Claro", 
    "dojox/charting/plot2d/Spider", 
    "dojox/charting/action2d/Tooltip", 
    "dojox/charting/widget/SelectableLegend", 
    "dojox/charting/axis2d/Default" 
    ], function (Chart, theme, Spider, Tooltip, Legend, Default) { 
     var chart = new Chart(element).setTheme(theme).addPlot("default", { 
      type: Spider, 
      radius: 200, 
      fontColor: "black", 
      labelOffset: "-20" 
     }); 
     var colors = ["blue", "red", "green", "yellow", "purple", "orange", "teal", 
        "maroon", "olive", "lime", "aqua", "fuchsia"]; 
     $.each(factors, function (index, factor) { 
      chart.addAxis(factor.name, { 
       type: Default, 
       min: factor.min, 
       max: factor.max 
      }); 
     }); 
     $.each(presets, function (pIndex, preset) { 
      var data = []; 
      $.each(factors, function (fIndex, factor) { 
       data[factor.name] = preset.values[fIndex]; 
      }); 
      chart.addSeries(preset.short, data, { 
       fill: colors[pIndex % colors.length] 
      }); 
     }); 
     new Tooltip(chart, "default"); 
     chart.render(); 
     new Legend({ 
      chart: chart, 
      horizontal: false 
     }, $(element).next(".legend")[0]); 
    }); 

我添加了一系列的阵列中的每个成员称为presets我用一个可供选择的图例，让用户可以根据需要打开或关闭它们。但是，我在文档中找不到的是如何在未选中的状态下启动一系列操作？理想情况下我想要做的事情是限制页面加载时可见的系列的数量，因为在某些情况下，我有多达14个预设，并且直到用户取消选择一堆为止，它看起来一团糟。所以我希望在开始时将前5个以上的每个预设隐藏起来。

这里是一个粗糙的fiddle我敲了演示。我想要的是当剧情第一次显示时，部分剧集未被选中。

更新：我尝试添加我的系列后添加此：

var checkboxes = $(".dijitCheckBoxInput").each((index, elem) => { 
    if (index > 4) { 
     elem.click(); 
    } 
}); 

其中一期工程，但似乎很脆弱。如果他们改变分配给复选框的类，它将会中断。此外，它禁止我使用多个dojo复选框，因为我没有一个很好的方法来区分差异。 （请注意，由SelectableLegend添加的复选框的ID是dijit_form_CheckBox_0,dijit_form_CheckBox_1等，这也没有给出与它们相关的有用信息）。我认为我可以使用图例占位符div来选择后代复选框，但似乎Dojo完全用表格替换占位符。

Answer 1

我看着道场代码，发现其中的形状被切换上&关闭whitin的SelectableLegend.js面积：

  var legendCheckBox = query(".dijitCheckBox", legend)[0]; 
      hub.connect(legendCheckBox, "onclick", this, function(e){ 
       this._toggle(shapes, i, legend.vanished, originalDyn, seriesName, plotName); 
       legend.vanished = !legend.vanished; 
       e.stopPropagation(); 
      }); 

的反复过程非常复杂和基于许多地方属性：

_toggle: function(shapes, index, isOff, dyn, seriesName, plotName){ 
      arrayUtil.forEach(shapes, function(shape, i){ 
       var startFill = dyn.fills[i], 
        endFill = this._getTransitionFill(plotName), 
        startStroke = dyn.strokes[i], 
        endStroke = this.transitionStroke; 
       if(startFill){ 
        if(endFill && (typeof startFill == "string" || startFill instanceof Color)){ 
         fx.animateFill({ 
          shape: shape, 
          color: { 
           start: isOff ? endFill : startFill, 
           end: isOff ? startFill : endFill 
          } 
         }).play(); 
        }else{ 
         shape.setFill(isOff ? startFill : endFill); 
        } 
       } 
       if(startStroke && !this.outline){ 
        shape.setStroke(isOff ? startStroke : endStroke); 
       } 
      }, this); 
     } 

我试着还要检查&手动取消选中图例中的dijit/form/Checkbox，但即使在图表上执行render（）/ fullrender（），也不会触发_toggle函数。

考虑到这一点，似乎没有其他方法可以通过手动触发onclick事件来打开和关闭系列。

为了使你的代码不那么脆弱，你可以使用手动传说中访问复选框部件：

查询（“dijitCheckBox”，传说）;//应该提供一个包含 小部件的数组。

并触发它们上的onclick事件。他们在阵列中的关键数字应该对应于添加的系列的顺序...

Dojo是一件很好的工作，请不要停止使用它！

Answer 2

DojoX中/图表/系列具有属性叫做脏根据API docs这是一个“标志，指示此元素是否需要呈现”。另外，如果限制某些系列的显示，您可以编写一个单独的界面来添加它们。例如，环比第一5.然后创建一个选择框或复选框列表的所有条目和调用chart.addSeries的onchange事件。

保持在每次创建将允许您以后调用destroy（）或destroyRecursive（）就可以了，如果用户不再希望它显示系列的引用。

因此，尽管理想，你可以切换这些系列的显示，最坏的情况下senerio是，你只需要添加，销毁，并根据一些用户的输入读取。

使用templated widget将让你保持这个接口和图表紧密相连，并支持重复使用。

顺便说一句，可以考虑使用“道场/ _base /阵列”和“道场/查询”，而取代的jQuery

Answer 3

的我已经更新了你的代码http://jsfiddle.net/92Dzv/18/

这里是的toogle关键。

dom.byId(le._cbs[0].id).click(); 
dom.byId(le._cbs[2].id).click(); 

选择您的图例索引并设置为_cbs。

通过这种方式le._cbs[0].id你会得到复选框的真实身份识别码（即内部在widget），然后只用click()

注：le是从这里走过。

var le = new Legend({ 
       chart: chart, 
       horizontal: false 
      }, legend); 

Answer 4

我想我明白了！

我找到了另一种方法来访问复选框！ dojo在内部使用“切换代码”连接onclick事件的方式是一样的。先来看看这款来自SelectableLegend.js（线150 - 156）：

  // toggle action 
      var legendCheckBox = query(".dijitCheckBox", legend)[0]; 
      hub.connect(legendCheckBox, "onclick", this, function(e){ 
       this._toggle(shapes, i, legend.vanished, originalDyn, seriesName, plotName); 
       legend.vanished = !legend.vanished; 
       e.stopPropagation(); 
      }); 

看起来他们用“.dijitCheckBox”类找到复选框DOM元素，并使用连接到它道场/连接。现在根据这一点，我提出这样的功能：

功能toggleSeries（图例，NUM）{

dojo.query（ “*”，legend.legends [NUM]）[0]。点击（） ;

dijit.findWidgets（legend.legends [num]）[0] ._ onClick（）; }

它不使用任何类定义（因为*）和它访问其中的复选框来自SelectableLegend内的区域。它需要SelectableLegend和您想要停用的系列的编号作为参数。这里使用此功能&中的jsfiddle例如隐藏你的系列的所有4与它：

http://jsfiddle.net/luciancd/92Dzv/17/

也请注意到的jsfiddle的“onDomReady”选项，如果没有它：在IE浏览器不工作。 代码中的ready函数！

卢西恩