0

我在使用 JQPlot 时遇到了问题，我设法在图表中显示了条形图，但由于某种原因没有绘制线条。

您可以在 JSFiddle 上看到代码（在 Internet Explorer 上不起作用）：http: //jsfiddle.net/gkp2N/

如果我将“seriesDefaults”更改为“series”，它会显示两条线，但不会绘制条形图。我花了两个小时弄清楚这个问题，希望有人能帮助我，谢谢！

这是JS代码：

var s1 = [
    ['2013-02-04 4:00PM', 11],
    ['2013-02-05 4:00PM', 11],
    ['2013-02-06 4:00PM', 15],
    ['2013-02-07 4:00PM', 12],
    ['2013-02-08 4:00PM', 16],
    ['2013-02-09 4:00PM', 7],
    ['2013-02-10 4:00PM', 9],
    ['2013-02-11 4:00PM', 6],
    ['2013-02-12 4:00PM', 13],
    ['2013-02-13 4:00PM', 12],
    ['2013-02-14 4:00PM', 6],
    ['2013-02-15 4:00PM', 13],
    ['2013-02-16 4:00PM', 3],
    ['2013-02-17 4:00PM', 9],
    ['2013-02-18 4:00PM', 18],
    ['2013-02-19 4:00PM', 18],
    ['2013-02-20 4:00PM', 12],
    ['2013-02-21 4:00PM', 14],
    ['2013-02-22 4:00PM', 7],
    ['2013-02-23 4:00PM', 5],
    ['2013-02-24 4:00PM', 3],
    ['2013-02-25 4:00PM', 9],
    ['2013-02-26 4:00PM', 15],
    ['2013-02-27 4:00PM', 14],
    ['2013-02-28 4:00PM', 4],
    ['2013-03-01 4:00PM', 0],
    ['2013-03-02 4:00PM', 0],
    ['2013-03-03 4:00PM', 0],
    ['2013-03-04 4:00PM', 0],
    ['2013-03-05 4:00PM', 0]
];



var s2 = [
    ['2013-02-04 4:00PM', 55],
    ['2013-02-05 4:00PM', 55],
    ['2013-02-06 4:00PM', 75],
    ['2013-02-07 4:00PM', 60],
    ['2013-02-08 4:00PM', 80],
    ['2013-02-09 4:00PM', 35],
    ['2013-02-10 4:00PM', 45],
    ['2013-02-11 4:00PM', 30],
    ['2013-02-12 4:00PM', 65],
    ['2013-02-13 4:00PM', 60],
    ['2013-02-14 4:00PM', 30],
    ['2013-02-15 4:00PM', 65],
    ['2013-02-16 4:00PM', 15],
    ['2013-02-17 4:00PM', 45],
    ['2013-02-18 4:00PM', 90],
    ['2013-02-19 4:00PM', 90],
    ['2013-02-20 4:00PM', 60],
    ['2013-02-21 4:00PM', 70],
    ['2013-02-22 4:00PM', 35],
    ['2013-02-23 4:00PM', 25],
    ['2013-02-24 4:00PM', 15],
    ['2013-02-25 4:00PM', 45],
    ['2013-02-26 4:00PM', 75],
    ['2013-02-27 4:00PM', 70],
    ['2013-02-28 4:00PM', 20],
    ['2013-03-01 4:00PM', 0],
    ['2013-03-02 4:00PM', 0],
    ['2013-03-03 4:00PM', 0],
    ['2013-03-04 4:00PM', 0],
    ['2013-03-05 4:00PM', 0]
];
var plot = $.jqplot('placeholder', [s1, s2], {

    // Turns on animatino for all series in this plot.
    animate: true,
    // Will animate plot on calls to plot1.replot({resetAxes:true})
    animateReplot: true,
    cursor: {
        show: true,
        zoom: true,
        looseZoom: true,
        showTooltip: false
    },

    seriesColors: ["#eee", "#ccc"],
    highlighter: {
        show: true,
        showLabel: true,
        tooltipAxes: 'y',
        sizeAdjust: 7.5,
        tooltipLocation: 'ne'
    },

    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        xaxis: 'xaxis',
        yaxis: 'yaxis',
        rendererOptions: {
            // Speed up the animation a little bit.
            // This is a number of milliseconds.  
            // Default for bar series is 3000.  
            animation: {
                speed: 2500
            },
            barWidth: 15,
            barPadding: -15,
            barMargin: 0,
            highlightMouseOver: false

        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: 30
        },
        showTicks: false
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            tickInterval: '1 day'

        },
        x2axis: {
            renderer: $.jqplot.DateAxisRenderer
        }

    }


});
4

1 回答 1

1

不要忘记包含所需的插件（barRenderer）：

<script class="include" src=" http://www.jqplot.com/deploy/dist/plugins/jqplot.barRenderer.min.js"></script>

编辑

小提琴上的工作示例

于 2013-03-06T08:41:04.240 回答