浏览器兼容性 - 错误呈现

时间:2013-10-22 09:18:43

标签: javascript jquery html5-canvas jqplot

我正在使用jqplot。提到我的图表看起来像第一张图片。 它在Firefox中看起来不错。但在chrome(即v30)中它看起来像在第二张图片中。 它在Safari中根本不起作用。

编辑:我猜问题是日期格式。 我举例说明min: '01.10.2013', max: '22.10.2013' 但chrome显示最小10.01.2013最大22.10.2013.此规则对整个系列有效。 如何更改此行为并告诉chrome,我使用dd.mm.yyyy日期格式?

enter image description here

enter image description here

代码:

<div id="chart2" style="height:250px; width:596px;"></div>

$(document).ready(function(){


  var line1 = [['01.10.2013',0],['02.10.2013',-0.42437431991294],['03.10.2013',-1.9912948857454],['04.10.2013',-1.512513601741],['07.10.2013',-2.3177366702938],['08.10.2013',-2.6115342763874],['09.10.2013',-3.4711643090316],['10.10.2013',-1.316648531012],['11.10.2013',-0.54406964091403],['14.10.2013',-0.71817192600653],['15.10.2013',-1.7627856365615],['16.10.2013',-1.8824809575626],['17.10.2013',-2.9815016322089],['18.10.2013',-1.0663764961915],['21.10.2013',-1.512513601741]];   
  var line2 = [['01.10.2013',0],['02.10.2013',-0.42437431991294],['03.10.2013',-1.9912948857454],['04.10.2013',-1.512513601741],['07.10.2013',-2.3177366702938],['08.10.2013',-2.6115342763874],['09.10.2013',-3.4711643090316],['10.10.2013',-1.316648531012],['11.10.2013',-0.54406964091403],['14.10.2013',-0.71817192600653],['15.10.2013',-1.7627856365615],['16.10.2013',-1.8824809575626],['17.10.2013',-2.9815016322089],['18.10.2013',-1.0663764961915],['21.10.2013',-1.512513601741]];
  var plot3 = $.jqplot('chart2', [line2,line1], {


    seriesDefaults: { lineWidth: 0.8, showMarker:false,  showMarker:false },




    grid: {background:'#fdfdfd', borderWidth: 0.4 },
        series: [            
        {label: 'incl. Dividende'},
      {label: 'excl. Dividende'}
        ],
        seriesColors: [ "#009933", "#003399"],
    axes:{
        xaxis:{
            renderer:$.jqplot.DateAxisRenderer,
        tickOptions: {
                formatString: '%d.%m.%Y'
            },
        min: '01.10.2013',
        max: '22.10.2013'
     }
        }
    });
  mytitle = $('<div class="my-jqplot-title" style="opacity:0.4;filter:alpha(opacity=40);font-weight:bold;font-family:Tahoma, Geneva, sans-serif ;color:#DDDDDD; font-size:27px;position:absolute;text-align:center;top: 101px;width:100%; ">CHART</div>').insertBefore('.jqplot-series-canvas');//('.jqplot-grid-canvas');


});

1 个答案:

答案 0 :(得分:1)

您需要以正确的格式定义最小值和最大值:

axes: {
 xaxis: {
  renderer: $.jqplot.DateAxisRenderer,
  tickOptions: { formatString: '%d.%m.%Y' },
  min: '2013-10-01',
  max: '2013-10-22'
 }
}

请参阅工作示例here