【问题标题】:jqPlot: Line Graph: Lines and Ticks are not displayingjqPlot:折线图:线和刻度不显示
【发布时间】:2014-11-03 01:23:56
【问题描述】:

我正在努力创建 jqPlot 线图,希望有人能提供帮助。出于某种原因,我的线条和刻度没有出现,我不知道为什么。我已经复制了下面的麻烦代码。

谁能告诉我我做错了什么?

如果我还能做些什么来帮助说明或解决问题,请告诉我。

$(document).ready(function(){   

    var line1 = [['07-01-2014',0],['08-01-2014',87],['09-01-2014',0],['10-01-2014',0],['11-01-2014',0],['12-01-2014',0],['01-01-2015',0],['02-01-2015',71],['03-01-2015',0],['04-01-2015',83],['05-01-2015',0],['06-01-2015',82]]
    var line2 = [['07-01-2014',0],['08-01-2014',85],['09-01-2014',0],['10-01-2014',0],['11-01-2014',1],['12-01-2014',0],['01-01-2015',0],['02-01-2015',71],['03-01-2015',0],['04-01-2015',83],['05-01-2015',0],['06-01-2015',82]]
    var jqpData = [line1, line2];

    var xLabels = ['07-01-2014','08-01-2014','09-01-2014','10-01-2014','11-01-2014','12-01-2014','01-01-2015','02-01-2015','03-01-2015','04-01-2015','05-01-2015','06-01-2015'],
        lLables = ['Series 1','Series 2'];

    $(function () {
        var plot1 = $.jqplot('chart1', jqpData, {
            title: 'July through June',
            seriesDefaults:{

                rendererOptions: {smooth: true},
                label:' ',
                lineWidth: 2
            },
            axesDefaults: {
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer
            },
            legend:{
                show: true,
                location: 'sw',
                placement: 'outsideGrid',
                labels: lLables
            },
            axes: {
                xaxis: {
                    renderer:$.jqplot.DateAxisRenderer,
                    tickOptions:{
                        angle:-30,
                        fontFamily:'Trebuchet MS,Arial,Helvetica,sans-serif',
                        fontSize: '1em',
                        min:'07-01-2014', 
                        tickInterval:'1 month'
                    }
                },
                yaxis:{
                    label:'',
                    min:0,
                    max:96.9849
                }
            }
        });
    });
});

【问题讨论】:

  • 您是否将所有必需的插件都包含为DateAxisRenderer?您在控制台中收到任何错误吗?
  • 尝试不带选项,只带行,而不是一一添加。
  • 如果你需要显示你的刻度,那么你需要对它们进行转义,告诉 JavaScript 它们是literal。转义字符如下:“Hello, my name\'s \@Godisgood!

标签: javascript jqplot linegraph


【解决方案1】:

尝试将其添加为选项之一:

axes: {
    xaxis:{
        renderer: $.jqplot.CategoryAxisRenderer, //etc

更多信息在这里: 如果您还没有,请查看此链接:

http://www.jqplot.com/docs/files/jqplot-axisTickRenderer-js.html

然后应用如下所示:

http://www.jqplot.com/tests/rotated-tick-labels.php

【讨论】:

  • 正是我需要的!天才。
  • 太棒了!很高兴能帮上忙
猜你喜欢
  • 2013-07-05
  • 1970-01-01
  • 2012-10-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多