2014-12-17 5 views
0

nvd3 그래픽을 수행했지만 json이로드되지 않습니다.nvd3 로딩 중 json

nvd3에서 어떤 변화가 있습니까? 나는 조금 길을 잃었다. .. 미안. 내가 찾고 있었다

   [ 
    { 
     "date": "20140701", 
     "Baja": 0, 
     "No admitido": 3851, 
     "Pre-inscrito": 0, 
     "Admitido": 0, 
     "En reserva": 0, 
     "Alta": 0, 
     "Inactivo": 0 
    }, 
    { 
     "date": "20140701", 
     "Baja": 0, 
     "No admitido": 3851, 
     "Pre-inscrito": 2468, 
     "Admitido": 0, 
     "En reserva": 0, 
     "Alta": 0, 
     "Inactivo": 0 
    } 
] 

하지만 내가 찾은 모두 JSON을 수정하는 것입니다 :

nv.addGraph(function() { 
    var chart = nv.models.lineChart(); 
    var fitScreen = false; 
    var width = 600; 
    var height = 400; 
    var zoom = 1; 

    chart.useInteractiveGuideline(true); 
    chart.xAxis 
     .tickFormat(d3.time.format("%Y%m%d").parse); 
     //.tickFormat(d3.format(',r')); 

    chart.yAxis 
     .axisLabel('Alumnos') 
     .tickFormat(d3.format(',.2f')); 

    d3.select('#chart1 svg') 
     .attr('perserveAspectRatio', 'xMinYMid') 
     .attr('width', width) 
     .attr('height', height) 
     .datum(datos); 

    setChartViewBox(); 
    resizeChart(); 

    // These resizes both do the same thing, and require recalculating the chart 
    //nv.utils.windowResize(chart.update); 
    //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) }); 
    nv.utils.windowResize(resizeChart); 

    d3.select('#zoomIn').on('click', zoomIn); 
    d3.select('#zoomOut').on('click', zoomOut); 


    function setChartViewBox() { 
    var w = width * zoom, 
     h = height * zoom; 

    chart 
     .width(w) 
     .height(h); 

    d3.select('#chart1 svg') 
     .attr('viewBox', '0 0 ' + w + ' ' + h) 
     .transition().duration(500) 
     .call(chart); 
    } 

    function zoomOut() { 
    zoom += .25; 
    setChartViewBox(); 
    } 

    function zoomIn() { 
    if (zoom <= .5) return; 
    zoom -= .25; 
    setChartViewBox(); 
    } 

    // This resize simply sets the SVG's dimensions, without a need to recall the chart code 
    // Resizing because of the viewbox and perserveAspectRatio settings 
    // This scales the interior of the chart unlike the above 
    function resizeChart() { 
    var container = d3.select('#chart1'); 
    var svg = container.select('svg'); 

    if (fitScreen) { 
     // resize based on container's width AND HEIGHT 
     var windowSize = nv.utils.windowSize(); 
     svg.attr("width", windowSize.width); 
     svg.attr("height", windowSize.height); 
    } else { 
     // resize based on container's width 
     var aspect = chart.width()/chart.height(); 
     var targetWidth = parseInt(container.style('width')); 
     svg.attr("width", targetWidth); 
     svg.attr("height", Math.round(targetWidth/aspect)); 
    } 
    }; 
    return chart; 
}); 

는 그리고 JSON이다. 나는 해냈지만 작동하지 않았다. 가능한 경우이 json 형식을 유지하는 것을 선호합니다. 모든 과정을 단순화합니다.

정말 고마워요!

+0

I 그래프 코드에서 JSON에 대한 단일 참조가 표시되지 않습니다. 절대 알려주지 않으면 어떻게로드 할 수 있습니까? 'd3.json (또는 이와 비슷한 것)에 대한 전화를 놓치고 있습니다. – LeartS

+0

Creo q estas colocando mal el formato del json, pues creo q quieres hacer una grafica de lineas pero no tienes X y Y, pues almenos en el json no 는 데이터를 정의하고 데이터를 정의하며 데이터 형식을 정의합니다. 데이터를 매핑 할 수 있습니다. 정보는 다음과 같습니다. http://codepen.io/CristianG540/ 펜/Ggqjdm –

+0

안녕하세요 @ 크리스티앙 G. json은 더 길다 ... 내가하고 싶은 일은 7 줄 (바하, admitido, pre-inscrito, admitido ...)과 X의 날짜 다. 고맙습니다. – jmunozco

답변

0

미라 지난번 케 ESTO ES 이오 케 한잔 더 할래요 : 3

var chart = c3.generate({ 
    data: { 
     json: datos, 
     keys: { 
      x : 'date', // it's possible to specify 'x' when category axis 
      value: ['Baja', 'No admitido', 'Pre-inscrito', 'Admitido', 'En reserva', 'Alta', 'Inactivo'] 
     } 
    } 
}); 

http://codepen.io/CristianG540/pen/bNegqV

+0

그 파일은 다음과 같습니다. 아무런 결과도 표시되지 않습니다. :) Cual es mejor, c3 o nvd3? 건초 알갱이? Mil gracias por la ayuda 크리스티안! – jmunozco

+0

para mi c3 es mejor, lo estan actualosando muy seguido y la libreria en si es es muy 모듈러, 네임드, 네임드, 네임드, –