C3js 게이지 값이 중복됩니다.

Question

저는 C3 차트가 여러 개인 데이터 시각화 작업을하고 있습니다. 그 중 하나는 온라인으로 가져 오는 JSON 파일로 동적으로 업데이트되어야하는 한 쌍의 게이지입니다. 내 문제는 게이지 값이 업데이트 될 때 겹치기 때문입니다. 즉, 읽기 값을 65로 가져 오면 이전 값인 0이 계속 표시됩니다.

저는 C3js 0.4.7 버전을 사용하고 있습니다.

내 코드는 다음과 같습니다. 도와주세요 : 나는 jsfiddle에서 작업 코드를 참조하시기 바랍니다뿐만 아니라, XHR 요청에 대해 작업 게이지 c3js의 동일한 버전을 사용하여 얻을 수 있어요

var gauge = c3.generate({ 
       bindto: d3.select('div#MeterGauge'), 
       data: { 
         url: 'data/data.json', 
         mimeType: 'json', 
         type: 'gauge' 
       }, 
       gauge: { 
       //  label: 'One Value', 
       //  min: 0, 
       //  max: 100, 
       //  units: '%', 
       //  width: 50 
       }, 
       color: { 
         pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values. 
         threshold: { 
     //   unit: 'value', // percentage is default 
     //   max: 200, // 100 is default 
           values: [30, 60, 90, 100] 
           } 
       }, 
       size: { 
         height: 200 
       } 
     }); 
     setTimeout(function() { 
       gauge.load({ 
         url: 'data/data.json', 
         mimeType: 'json', 
         keys: { 
           value: ['Another Value'] 
         } 
       }); 
     }, 2000);; 

Answer 1

을 : -

var gauge = c3.generate({ 
      bindto: d3.select('div#MeterGauge'), 
      //data: { 
      //  url: 'data/data.json', 
      //  mimeType: 'json', 
      //  type: 'gauge' 
      //}, 
      data: { 
       columns: [ 
        ['data', 91.4] 
       ], 
       type: 'gauge', 
       onclick: function (d, i) { console.log("onclick", d, i);}, 
       onmouseover: function (d, i) { console.log("onmouseover", d, i);}, 
       onmouseout: function (d, i) { console.log("onmouseout", d, i); } 
      }, 
      gauge: { 
      //  label: 'One Value', 
      //  min: 0, 
      //  max: 100, 
      //  units: '%', 
      //  width: 50 
      }, 
      color: { 
        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values. 
        threshold: { 
    //   unit: 'value', // percentage is default 
    //   max: 200, // 100 is default 
          values: [30, 60, 90, 100] 
          } 
      }, 
      size: { 
        height: 200 
      } 
    }); 
    setTimeout(function() { 
     gauge.load({ 
      columns: [['data', 10]] 
     }); 
    }, 1000); 

    //setTimeout(function() { 
    //  gauge.load({ 
    //    url: 'data/data.json', 
    //    mimeType: 'json', 
    //    keys: { 
    //      value: ['Another Value'] 
    //    } 
    //  }); 
    //}, 2000); 


new Request.JSON({ 
    url: '/echo/json/', 
    data: { 
    json: JSON.encode({ 
     text: 'some text', 
     array: [1, 2, 'three'], 
     object: { 
      par1: 'another text', 
      par2: [3, 2, 'one'], 
      par3: {} 
     }, 
     percent: 44.8 
    }), 
    delay: 3 
    }, 
    onSuccess: function(response) { 
    update_gauge(response, $('post')); 
    } 
}).send(); 

var update_gauge = function(obj, result) { 
    console.log('response '+obj.percent); 
    gauge.load({ 
    columns: [['data', obj.percent]] 
    }); 
}; 

http://jsfiddle.net/chetanbh/Lxkhzfv0/11/

버그가있는 코드를 제공하려면 위의 바이올린을 제공하거나 수정하십시오.