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 个以上的每个预设。

这是我用来演示的一个粗略的 fiddle。我想要的是在首次显示绘图时取消选择某些系列。

更新 :我在添加我的系列后尝试添加它:

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

哪个有效，但似乎非常脆弱。如果他们更改分配给复选框的类，它将中断。此外，它禁止我使用多于一组的道场复选框，因为我没有很好的方法来区分它们。 (注意，由 SelectableLegend 添加的复选框的 ID 是 dijit_form_CheckBox_0 、 dijit_form_CheckBox_1 等，它们也没有提供关于它们相关的有用信息)。我以为我可以使用图例占位符 div 作为选择后代复选框的一种方式，但似乎 Dojo 完全用表格替换了占位符。

最佳答案

我查看了 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 事件之外，似乎没有其他方法可以打开和关闭系列。

为了使您的代码不那么脆弱，您可以使用以下方法手动访问图例中的 Checkbox 小部件:



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

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

关于dojo - 默认情况下在蜘蛛图中隐藏一个系列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14739176/