【问题标题】:JQPlot shows only bar chart but doesn't draw lineJQPlot 只显示条形图但不画线
【发布时间】:2013-03-05 18:33:48
【问题描述】:

我在使用 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
        }

    }


});

【问题讨论】:

    标签: jqplot


    【解决方案1】:

    不要忘记包含所需的插件(barRenderer):

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

    编辑

    工作示例on Fiddle

    【讨论】:

    • 嗨,我检查了你的 Fiddle,但如果我按“运行”,它不会显示图表。
    • 我已经编辑了我的回复:请参阅updated Fiddle(外部来源已更改,因为 jqplot 中的哪些似乎在任何时候都不起作用新的来自 bitbuckets。CLeonello 是 - 我认为 - 之一jqplot的开发者)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-10-16
    • 1970-01-01
    • 2018-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多