3

次のように定義された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();
     }
});

これは機能しますが、非常に壊れやすいようです。チェックボックスに割り当てられたクラスを変更すると、壊れます。また、違いを区別する良い方法がないため、複数の道場チェックボックスを使用することを禁止しています。(に追加されたチェックボックスのIDは、、SelectableLegendなどdijit_form_CheckBox_0dijit_form_CheckBox_1あり、それらが何に関連しているかについての有用な情報も提供しないことに注意してください)。子孫のチェックボックスを選択する方法として凡例のプレースホルダーdivを使用できるかもしれないと思いましたが、Dojoはプレースホルダーを完全にテーブルに置き換えているようです。

4

4 に答える 4

1

dojoコードを調べたところ、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イベントを手動で発生させる以外に、シリーズのオンとオフを切り替えることはできないようです。

コードの脆弱性を減らすために、次のコマンドを使用して、凡例内のチェックボックスウィジェットに手動でアクセスできます。

query( "。dijitCheckBox"、凡例); //ウィジェットを含む配列を配信する必要があります。

それらのonclickイベントをトリガーします。配列内のキー番号は、追加されたシリーズの順序に対応している必要があります。

道場は素晴らしい作品です。道場での作業をやめないでください。

于 2013-02-12T10:38:13.953 に答える
1

dojox / charting / Seriesにはdirtyという属性があり、APIドキュメントによると、「この要素をレンダリングする必要があるかどうかを示すフラグ」です。

または、一部のシリーズの表示を制限している場合は、それらを追加するための別のインターフェイスを作成できます。たとえば、最初の5をループします。次に、すべてのエントリと、chart.addSeriesを呼び出すonchangeイベントを含む選択ボックスまたはチェックボックスのリストを作成します。

作成した各シリーズへの参照を保持すると、ユーザーが表示したくない場合に、後でdestroy()またはdestroyRecursive()を呼び出すことができます。

したがって、理想的にはこれらのシリーズの表示を切り替えることができますが、最悪の場合のsenerioは、ユーザー入力に基づいて追加、破棄、および読み取りを行うことです。

テンプレート化されたウィジェットを使用すると、このインターフェイスとグラフを緊密にリンクし、再利用をサポートできます。

ところで、jqueryの代わりに「dojo / _base/array」と「dojo/query」を使用することを検討してください

于 2013-02-11T15:32:55.723 に答える
1

コードを更新しました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にして、チェックボックスの実際のID(ウィジェット内のID)を取得し、次に使用します。click()

注:leここから来ています。

var le = new Legend({
                chart: chart,
                horizontal: false
             }, legend);
于 2013-02-12T04:18:16.907 に答える
1

私はそれを持っていると思います!

I found another way to access the checkboxes ! It's the same way dojo uses internally to connect the "toggle code" to the onclick event. First take a look at this from SelectableLegend.js (Lines 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();
          });

It looks like they use the ".dijitCheckBox" class to find the checkbox dom element and connect to it using dojo/connect. Now based on that, i made this function:

function toggleSeries (legend,num) {

dojo.query("*",legend.legends[num])[0].click();

dijit.findWidgets(legend.legends[num])[0]._onClick(); }

It doesn't use any class definition (because of the *) and it accesses the areas where the checkboxes are from within the SelectableLegend. It needs the SelectableLegend and the number of the series you want to deactivate as parameters. Here the jsfiddle example with this function & hiding all 4 of your series with it:

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

Also please notice the "onDomReady" Option in jsfiddle, without it: doesnt work in IE. And the ready function within the code !

Lucian

于 2013-02-14T00:00:12.030 に答える