jquery - 用于绘制负值和正值趋势的 Jquery 插件

Question

我有一些数字，包括正数和负数，我想以折线（线形图或趋势）的格式显示它们。我发现 gRaphael 非常有趣，我看到几个例子表明它可以完美地处理正数，但我找不到任何好的插件来显示正值和负值，如下所示：

有什么好的插件可以满足这个要求吗？

Answer 1

你可以用jqPlot做到这一点。

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