Dojo 默认情况下在蜘蛛图中隐藏序列

我在使用Dojo的图形库时有一个蜘蛛图，定义如下：

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个以上的所有预设

这是我敲过的一个粗制滥造的例子。我想要的是在第一次显示绘图时取消选择某些系列

更新：我在添加系列后尝试添加此内容：

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

---

这很有效，但看起来很脆弱。如果他们更改分配给复选框的类，它将中断。此外，它还禁止我使用多组dojo复选框，因为我没有很好的方法来区分它们之间的区别。（注意，

SelectableLegend

添加的复选框ID是

dijit\u form\u CheckBox\u 0

，

dijit\u form\u CheckBox\u 1

等，这也没有提供与它们相关的有用信息）。我想我可能可以使用图例占位符div作为选择子代复选框的一种方式，但是Dojo似乎完全用一个表来替换占位符

dojox/charting/Series有一个名为dirty的属性，根据，该属性是一个“指示是否需要呈现此元素的标志”

或者，如果要限制某些系列的显示，可以编写一个单独的接口来添加它们。例如，在前5个上循环。然后创建一个包含所有条目的选择框或复选框列表，以及一个调用chart.addSeries的onchange事件

保留对创建的每个系列的引用将允许您稍后在用户不希望再显示该系列时对其调用destroy（）或destroycursive（）

因此，虽然理想情况下您可以切换这些系列的显示，但最糟糕的情况是您只需根据一些用户输入添加、销毁和读取

使用将允许您保持此界面和图表紧密链接，并支持重用

< p>我已经更新了代码

这是toogle的关键

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

选择图例的索引并设置为

\u cbs

通过这种方式

le.\u cbs[0].id

您将获得复选框的真实id（在小部件中），然后只需使用

click（）

注：

le

来自这里

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

---

我查看了dojo代码，在SelectableLegend.js中找到了打开和关闭形状的区域：

切换过程非常复杂，并且基于许多局部属性：

_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，但在任何情况下都不会触发_toggle函数，即使在图表上执行render（）/fullrender（）

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

为了减少代码的脆弱性，您可以使用以下方法手动访问图例中的复选框小部件：

查询（“.dijitCheckBox”，图例）；//应该提供一个包含 小部件

并触发它们上的onclick事件。它们在数组中的键号应与序列中添加的顺序相对应

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

我想我找到了

我找到了另一种进入复选框的方法！这与dojo内部将“切换代码”连接到onclick事件的方式相同。首先从SelectableLegend.js（第150-156行）中了解一下这一点：

看起来他们使用“.dijitCheckBox”类来查找checkbox dom元素，并使用dojo/connect连接到它。基于此，我做了这个函数：

功能切换系列（图例，数字）{

dojo.query（“*”，legend.legends[num]）[0]。单击（）

dijit.findWidgets（legend.legends[num]）[0]。_onClick（）；}

它不使用任何类定义（因为*），它访问SelectableLegend中复选框所在的区域。它需要SelectableLegend和要停用的序列号作为参数。下面是使用此函数的JSFIDLE示例&使用它隐藏系列的所有4个：

另外，请注意JSFIDLE中的“onDomReady”选项，没有它：在IE中不工作。 代码中的ready函数

---

Lucian

我可能只需要

.addSeries

并手动将它们从一组复选框中删除（

脏的
标志似乎没有任何作用）。他们没有一个简单的方法来做这件事，这真的很烦人。使用我自己的复选框可能意味着当您将鼠标移到
SelectableLegend
上时，我将失去突出显示功能。我只在这个蜘蛛图中使用Dojo（它比我遇到的任何其他JS蜘蛛图都好——这并没有说太多）。我在其他地方使用jQuery、knockout和flot，如果我能帮助的话，我不想添加更多的Dojo。我确实在
SelectableLegend
中看到了
\u切换
代码，并认为应该有一个更简单的方法。嗯，看起来完全是倒退了。当然，传奇应该告诉这个系列隐藏自己，而这个系列应该处理好这个部分。另外，我不确定是否要使用Dojo
query
，但通过检查DOM，我知道SelectableLegend完全用一个表替换了现有的占位符元素，这使得再次查找占位符变得更加困难（我想您可以将占位符包装到另一个位置）
_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);
        }

          //  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();
          });