음수 및 양수 모두 추세를 그리기위한 Jquery 플러그인

Question

나는 양수와 음수를 포함한 몇 가지 숫자를 가지고 있는데이를 선 (챠트 또는 경향)의 형식으로 보여주고 싶습니다. 나는 gRaphael이 매우 흥미 롭다는 것을 알았습니다. 몇 가지 예가 양수로 완벽하게 작동한다는 것을 보여 주었지만 다음과 같은 양수 값과 음수 값을 표시 할 수있는 좋은 플러그를 찾을 수 없었습니다.

좋은 점이 있습니까? 이 요구 사항에 맞는 플러그인?

Answer 1

jqPlot과 같이 할 수 있습니다.

Here's the code demo at jsFiddle Firefox에서 jqPlot을 사용하여 예제와 같은 음수 데이터 포인트가있는 추세를 테스트했습니다.

Flot이나 gRaphael보다 더 많은 옵션과 문서로 jqPlot을 사용하기가 더 쉬웠습니다.

jQuery(document).ready(function() { 

    chartData= [["1", "-1","2","-3","4"]]; 

ticks = ['Monday','Tuesday','Wed','Thursday','Friday']; 

chartHistorical('history',chartData,ticks); 

function chartHistorical(chartId,chartData,ticks){ 

    var chart = jQuery.jqplot(chartId, chartData, { 
    animate: !jQuery.jqplot.use_excanvas, 
    seriesDefaults: { 
     renderer: jQuery.jqplotLineRenderer, 
     pointLabels: { 
      show: true 
     }, 

    }, 
    series: [{ 
      label: 'Series1' 
     } ], 
    seriesColors: ["#efa229"],//"#245779", 

    axesDefaults: { 
     base: 10, // the logarithmic base. 
     tickDistribution: 'evens', // 'even' or 'power'. 
     // 'even' will produce 
     // with even visiual 
     // (pixel) 
     // spacing on the axis. 'power' will produce ticks 
     // spaced by 
     // increasing powers of the log base. 
    }, 
    axesDefaults : { 
     tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      fontSize: '14pt' // font size for labels 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer:jQuery.jqplot.CategoryAxisRenderer, 
      ticks: ticks 
     }, 
     yaxis: { 
      // Don't pad out the bottom of the data range. 
      // By default, 
      // axes scaled as if data extended 10% above and 
      // below the 
      // actual range to prevent data points right on 
      // grid boundaries. 
      // Don't want to do that here. 
      padMin: 0, 
      max: 4, 
      min: -4 
     } 
    }, 
    tickOptions: { 
     fontSize: '14pt' 
    }, 
    legend: { 
     show: true, 
     location: 'n', // compass direction, nw, n, ne, 
     // e, se, s, sw, w. 
     xoffset: 12, // pixel offset of the legend box 
     // from the x (or x2) axis. 
     yoffset: 12, // pixel offset of the legend box 
     // from the y (or y2) axis. 
     placement: 'inside' 
    }, 
    cursor: { 
     show: false, 
     showTooltip: true, 
     tooltipLocation: 'ne', 
    }, 
    grid: { 
     background: 'white' 
    } 
}); 
} 
    });