jquery插件绘制趋势的正面和负面的价值

Question

我有一些数字，包括正面和负面，我想以线（林德图或趋势）的格式显示它们。我发现gRaphael很有趣，我看到一对夫妇的例子表明，它与正数的作品完美，但我不能找到任何好的插件显示类似下面的正反两方面的价值：

有没有什么好的插件来适应这个要求？

Answer 1

你可以用jqPlot这样做。

Here's the code demo at jsFiddle，在Firefox测试，使用jqPlot表示与像您的示例负数据点的趋势。

我发现jqPlot比Flot或gRaphael更容易使用更多的选项和更好的文档。

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' 
    } 
}); 
} 
    });