빈 인력거 차트에 데이터 추가

나는 RickshawJS와 다른 데이터를 차트로 작성하고 있습니다. 그러나 사용자가 #search 버튼을 클릭 할 때 차트를 업데이트하는 방법이 필요합니다. 지금은 그냥 오래된 차트 아래에 새로운 차트를 만들면 꽤 엉망입니다.빈 인력거 차트에 데이터 추가

사용자가 페이지를 입력하고 세부 정보를 입력하고 단추를 클릭하여 차트를 만듭니다. 그래서 이상적으로는 보이지 않는 빈 차트부터 시작하고 싶지만 실제로 차트와 축에서 데이터를 제거한 다음이를 업데이트하는 방법을 알 수는 없습니다.

차트와 축에 $('#chart svg').remove();을 부를 수는 있지만 지저분 해 보입니다.

$('#search').click(function(event){ 
    event.preventDefault(); 

    var data = utils.malletData(); 
    var graph = new Rickshaw.Graph({ 
      element: document.querySelector("#chart"), 
      width: 800, 
      height: 250, 
      series: [ { 
        name: data['name'], 
        color: 'steelblue', 
        data: data['series'] 
      } ] 
    }); 
    graph.render(); 

    var hoverDetail = new Rickshaw.Graph.HoverDetail({ 
     graph: graph, 
     xFormatter: function(x) { 
      var date = new Date(x).getTime(); 
      return moment(x).format('MMMM Do YYYY, h:mm:ss a'); 
     }, 
     yFormatter: function(y) { return Math.floor(y) + " users" } 
    }); 

    var xAxis = new Rickshaw.Graph.Axis.X({ 
     graph: graph, 
     orientation: 'bottom', 
     element: document.getElementById('x_axis'), 
     tickFormat: function(x) { return moment(x).fromNow(); }, 
     ticks: 7, 
     tickSize: 1, 
    }); 
    xAxis.render(); 

    var ticksTreatment = 'glow'; 
    var yAxis = new Rickshaw.Graph.Axis.Y({ 
     graph: graph, 
     orientation: 'left', 
     tickFormat: Rickshaw.Fixtures.Number.formatKMBT, 
     ticksTreatment: ticksTreatment, 
     element: document.getElementById('y_axis'), 
    }); 
    yAxis.render(); 
});

출처

2013-07-03 mackwerk

공식적인 방법은 없습니다. 그러나 자바 스크립트의 배열을 참조로 전달한 다음 그래프를 업데이트한다는 사실을 활용할 수 있습니다.

이 demo on fiddle

var data = [ 
     { 
      data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ], 
      color: "#c05020" 
     }, { 
      data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ], 
      color: "#30c020" 
     } 
]; 


var graph = new Rickshaw.Graph({ 
    element: document.getElementById("chart"), 
    renderer: 'line', 
    height: 300, 
    width: 800, 
    series: data 
}); 

var y_ticks = new Rickshaw.Graph.Axis.Y({ 
    graph: graph, 
    orientation: 'left', 
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT, 
    element: document.getElementById('y_axis'), 
}); 

graph.render(); 


$('button#add').click(function() { 
    data.push({ 
      data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ], 
      color: "#6060c0" 
    }); 
    graph.update(); 
});

에서보세요

출처

2013-10-01 21:13:28 danielepolencic

빈 인력거 차트에 데이터 추가

답변

관련 문제