0

アプリケーション サーバーで実行されているサービスの数を監視するアプリケーションを構築しています。実行中のサービスに関する情報はデータベースに保存され、その情報の一部を Web ページに表示したいと考えています。この時点で、データベースが更新されると動的に更新される、アクティブに実行されているサービスの数のグラフィカル表現を作成したいと思います。目標は、実行中のサービス数の最新の 10 個 (またはそれくらい) の値を表示する単純なグラフを作成することです。dojox.charting.Chart ウィジェットを使用していますが、チャートを適切に更新できず、numFailedAttempts:"0" の最新の 10 個の値しか表示されません。現状では、グラフにはすべての値が表示されますが、x 軸の値は、すべてを収容するために継続的に接近していきます。dojotoolkit.org の dojo api リファレンスとドキュメントに基づいて、dojox.charting.Chart の「displayRange」属性がこの問題を解決するはずだと考えました。だから私の質問は、私は何が間違っているのですか? コードは次のとおりです。 

<html>
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">        
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>

    <script type="text/javascript">

        dojo.require("dojox.charting.StoreSeries");
        dojo.require("dojox.charting.Chart2D");
        dojo.require("dojo.store.Memory");
        dojo.require("dojo.store.Observable");
        dojo.require("dojox.charting.Chart");
        dojo.require("dojox.charting.plot2d.Areas");

        dojo.ready(function(){renderDataChart()});

        function renderDataChart(){

            //data from a database
            var dataChartData = {
                itentifier: 'id',
                items:
                    [
                    {id: 1, serviceName:"service1", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"null", errorMessage:"null", suppressError:"null"},
                    {id: 2, serviceName:"service2", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"now", errorMessage:"broken", suppressError:"click"},
                    {id: 3, serviceName:"service3", startDate:"today", endDate:"today", numFailedAttempts:"0", errorTime:"now", errorMessage:"broken", suppressError:"click"},
                    {id: 4, serviceName:"service4", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"now", errorMessage:"broken", suppressError:"click"},
                    {id: 5, serviceName:"service5", startDate:"today", endDate:"today", numFailedAttempts:"0", errorTime:"null", errorMessage:"null", suppressError:"null"}
                ]                    
            };
            //data store
            var dataChartStore = dojo.store.Observable(new dojo.store.Memory({
                data: {
                    identifier: "id",
                    label: "runningServices",
                    items: dataChartData
                }
            }));    

            var dataChart = new dojox.charting.Chart("myDataChart", {

                displayRange: 10,
                stretchToFit: false,
                scrolling: true,     
                fieldName: "runningServices",
                type: dojox.charting.plot2d.Areas
            });
            dataChart.addAxis("x", {microTickStep: 1, minorTickStep: 1});
            dataChart.addAxis("y", {vertical: true, minorTickStep: 1, natural: true});
            dataChart.addSeries("y", new dojox.charting.StoreSeries(dataChartStore, {query: {numFailedAttempts: 0}}, "value"));
            dataChart.render();

            //update datastore to simulate new data
            var startNumber = dataChartData.length;
            var interval = setInterval(function(){
                 dataChartStore.notify({value: Math.ceil(Math.random()*29), id: ++startNumber, numFailedAttempts: 0});                    

            }, 1000);
        }
    </script>
</head>
<body>
    <div id="myDataChart" style="width: 500px; height: 200px;"></div>
</body>

4

1 に答える 1

1

私は同じ問題に苦労してきました。私はそれを完全には理解していませんが、あなたが説明していると思うことを行う代替手段を見つけました. これがコードです（以下の説明）：

<html>
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">        
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>

<script type="text/javascript">

  dojo.require("dojox.charting.StoreSeries");
  dojo.require("dojo.store.Memory");
  dojo.require("dojo.store.Observable");

  dojo.require("dojox.charting.Chart2D");
  dojo.require("dojox.charting.Chart");
  dojo.require("dojox.charting.plot2d.Areas");

  dojo.ready(function () {
    renderArrayChart();
    renderStoreChart();
  });

  function renderArrayChart() {
    try {
      var dataChart = new dojox.charting.Chart("myArrayChart", {
        stretchToFit: false,
        scrolling: false,
        type: dojox.charting.plot2d.Areas,
        title: "update array, rerender"
      });

      // create an array of x/y pairs as the data source
      var data = [{ x: 1, y: 2.1}];

      dataChart.addAxis("x", { microTickStep: 1, minorTickStep: 1 });

      // set min/max so the Y axis scale does not change with the data
      dataChart.addAxis("y", { vertical: true, minorTickStep: 1, natural: true, min: 0, max: 30 });

      // create the series with the data array as the source
      dataChart.addSeries("y", data);
      dataChart.render();

      // this counter is used as the x value for new data points
      var startNumber = data.length;

      //update datastore to simulate new data
      var interval = setInterval(function () {

        // if we have more than 9 data points in the array, remove the first one
        if (data.length > 9) data.splice(0, 1);

        // push a new data point onto the array using the counter as the X value
        data.push({ x: ++startNumber, y: Math.ceil(Math.random() * 29) });

        // update the series with the updated arrray
        dataChart.updateSeries("y", data);

        // re-render the chart
        dataChart.render();

      }, 1000);
    }
    catch (ex) {
      alert(ex.message);
    }
  }


  function renderStoreChart() {
    try {
      // create an array as the data source
      var dataArray = [{ id: 1, value: 2.1}];

      // create the observable data store
      var dataStore = dojo.store.Observable(new dojo.store.Memory({
        data: {
          identifier: "id",
          items: dataArray
        }
      }));

      var storeChart = new dojox.charting.Chart("myStoreChart", {
        stretchToFit: false,
        scrolling: false,
        type: dojox.charting.plot2d.Areas,
        title: "data store"
      });

      storeChart.addAxis("x", { microTickStep: 1, minorTickStep: 1 });

      // set min/max so the Y axis scale does not change with the data
      storeChart.addAxis("y", { vertical: true, minorTickStep: 1, natural: true, min: 0, max: 30 });

      storeChart.addSeries("y", new dojox.charting.StoreSeries(dataStore, { bindings: { x: "id", y: "value"} }));
      storeChart.render();

      // this counter is used as the x value for new data points
      var startNumber = 1;

      //update datastore to simulate new data
      var interval = setInterval(function () {

        // if we have more than the desired number data points in the store, remove the first one
        if (startNumber > 9) dataStore.notify(null, startNumber - 10);

        // add a new point to the data store
        dataStore.notify({ id: ++startNumber, value: Math.ceil(Math.random() * 29) });

      }, 1000);
    }
    catch (ex) {
      alert(ex.message);
    }
  }

</script>
</head>
<body>
<div id="myArrayChart" style="width: 500px; height: 200px;"></div><br />
<div id="myStoreChart" style="width: 500px; height: 200px;"></div>
</body>
</html>

上のグラフでは、(Observable ストアの代わりに) データ ソースとして単純な配列を使用しています。間隔関数では、(目的の要素数に達した後) 最初の配列要素を単純にスライスし、新しい要素を追加します。次に、シリーズ (dataChart.updateSeries) を更新し、チャートを再レンダリングします。X 軸ラベルを正しく機能させるために、各配列項目はオブジェクト x および y 値です (例: {x: 1, y: 2.1})。

下のグラフは、データ ストアを使用しています (例の適応)。チャートからスクロールするデータを取得します。dataStore.notify(null, objectId) メソッドは、指定された ID を持つオブジェクトをデータ ストアから削除します。ただし、このグラフの X 軸ラベルはまだ正しく表示されません。

どちらの場合も、グラフは適切にスケーリングされません。約 50 のデータ ポイントしかない場合でも、レンダリングは非常に遅くなります。Flotなどの他のオプションを検討することもできます。Flotは、データ ポイントの数が多いほどパフォーマンスが向上するようです。

于 2012-04-19T14:46:52.747 に答える