dojox.charting.Chart dataRange 차트의 x 축을 올바르게 제한하지 않음

응용 프로그램 서버에서 실행중인 서비스의 수를 모니터링하는 응용 프로그램을 작성 중입니다. 실행중인 서비스에 대한 정보는 데이터베이스에 저장되며 해당 정보 중 일부를 웹 페이지에 표시하려고합니다. 이 시점에서 나는 단지 데이터베이스가 업데이트 될 때 동적으로 업데이트되는 서비스의 수를 그래픽으로 표현하고자합니다. 목표는 ekg 판독 값과 비슷한 실행중인 서비스 수에 대한 가장 최근의 10 개 (또는 그 이상)의 값을 표시하는 간단한 차트를 만드는 것입니다. dojox.charting.Chart 위젯을 사용하고 있지만 차트를 제대로 업데이트하는 데 문제가있어서 numFailedAttempts에 대한 가장 최근의 10 개의 값 ("0") 만 표시합니다. 지금 당장 차트에 모든 값이 표시되고 x 축 값은 계속 가까워지고 가까이 다가가 모든 것을 고취시킵니다. dojo api 레퍼런스와 dojotoolkit.org에 대한 문서를 바탕으로 dojox.charting.Chart의 "displayRange"속성이이 문제를 해결할 것으로 생각했습니다. 그래서 내 질문은, 내가 뭘 잘못하고 있니? 여기 코드는 다음과 같습니다 저도 같은 문제로 어려움을 겪고있다dojox.charting.Chart dataRange 차트의 x 축을 올바르게 제한하지 않음

<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>

출처

2011-12-08 Ted

. 나는 그것을 완전히 이해하지 못했지만 당신이 묘사하고 있다고 생각하는 것을하는 대안을 발견했습니다.

<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>

상부 차트는 데이터 소스 (대신 피 감시 저장소)로서 간단한 배열을 사용하는 코드 여기 (아래 설명)이다. interval 함수에서는 첫 번째 배열 요소를 원하는 요소 수만큼 슬라이스하고 새 요소를 추가합니다. 그런 다음 계열 (dataChart.updateSeries)을 업데이트 한 다음 차트를 다시 렌더링합니다. X 축 레이블을 올바르게 작동 시키려면 각 배열 항목이 객체 x 및 y 값 (예 : {x : 1, y : 2.1})이어야합니다.

아래쪽 차트는 데이터 저장소를 사용합니다 (예제를 적용한 것). 차트에서 스크롤 할 데이터를 가져옵니다. dataStore.notify (null, objectId) 메서드는 데이터 저장소에서 지정된 ID를 가진 객체를 제거합니다. 그러나이 차트의 X 축 레이블은 여전히 올바르게 표시되지 않습니다.

두 경우 모두 차트의 확장이 잘 이루어지지 않습니다. 약 50 개의 데이터 포인트만으로도 렌더링 속도가 매우 느려집니다. Flot과 같은 다른 옵션을 시도해 볼 수 있습니다. 많은 수의 데이터 포인트를 사용하면 성능이 더 좋아집니다.

출처

2012-04-19 14:46:52 mweaver

dojox.charting.Chart dataRange 차트의 x 축을 올바르게 제한하지 않음

답변

관련 문제