2013-07-05 68 views
0
here it code 

    $(function() { 
      $('#container').highcharts({ 
       chart: { 
        showAxes : true, 
        type: 'line', 
      spacingBottom: 50, 
      style: { 
        fontFamily: 'Arial, Helvetica, sans-serif', 
       } 
       }, 
       tooltip: { 
      formatter: function() { 
       var colors = new Array("#3dcd50","#feb421","#e5928a"); 
          var quarterArray = new Array ("Jan-Mar","Apr-Jun","Jul-Sep","Oct-Dec"); 
          var prefix =""; 

          var p = new Date(this.x); 
          var year = p.getFullYear();var month = p.getMonth(); 

          if (month >= 1 && month <= 3){ 
          prefix = quarterArray[0]; 
          } 
          else if (month >= 4 && month <= 6){ 
            prefix = quarterArray[1]; 
          } 
          else if (month >= 7 && month <= 9){ 
            prefix = quarterArray[2]; 
          } 
          else if (month >= 10 && month <= 12){ 
            prefix = quarterArray[3]; 
          } 
          prefix += " "+year; 

          var str = '<table><tr><td><span style="color:grey;font-family=Arial, Helvetica, sans-serif">'+ prefix+'</span><br/></td></tr>'; 
          var i = 0; 
        var length = this.points.length; 
       while (i < length){ 
        str += '<tr><td><span style="color:'+colors[i]+'">'+this.points[i].series.name+' : </span></td>'; 
        str += '<td style="text-align: right"><span style="font-size: 16px;font-family: WebRupee;font-size: 14px;font-weight: bold;" >Rs.</span><b> '+Highcharts.numberFormat(this.points[i].y, 0,'',',')+' /Sq.ft.</b><br/></td></tr>' ;  
        i++; 

       } 
             str += '</table>'; 
          return str; 
       }, 
      style: { 
       fontSize: '12px', 
       fontFamily: 'Arial, Helvetica, sans-serif' 
      }, 
      borderColor: '#bfbfbf', 
      backgroundColor : '#FFFFFF', 
        crosshairs: [true], 
        shared : true 
       }, 
       title: { 
        text: '', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: '', 
        x: -20 
       }, 
       xAxis: { 
       type :'datetime', 
       dateTimeLabelFormats: { 
        month: '%b' 
       }, 
       showFirstLabel: true, 
       gridLineWidth : 0, 
       tickInterval : 12*30*24*3600* 1000, 
       tickLength : 20, 
       tickWidth : 1, 
       minorGridLineWidth : 0, 
       minorTickInterval : 3*30*24 * 3600 * 1000 + 1.25*24 * 3600 * 1000, //distributing 6 extra days in 4 quarters 
       minorTickLength : 10, 
       minorTickWidth : 1, 
       lineWidth : 4, 
       lineColor:'#e8e8e8', 
       min : Date.UTC(2010,0, 1), 
       max : Date.UTC(2013,6, 1), 
       labels : { 
        align: 'center', 
        x: 53, 
        y: 30, 
        style: { 
         fontSize: '12px', 
          fontFamily: 'Arial, Helvetica, sans-serif' 
         } 
       } 
       }, 
       yAxis: { 
      showFirstLabel: false, 
      gridLineColor: '#e3e3e3', 
        title: { 
       enabled : true, 
         text: 'PRICE <span style="font-family: WebRupee;font-size: 14px;font-weight: bold;" >Rs.</span>/SQ.FT.', 
       style: { 
        fontSize: '12px', 
         fontFamily: 'Arial, Helvetica, sans-serif', 
        color : '#000000' 
       } 
        }, 
      labels: { 
       formatter: function() { 
        return Highcharts.numberFormat(this.value, 0,'',','); 
       }, 
       style: { 
        fontSize: '12px', 
         fontFamily: 'Arial, Helvetica, sans-serif' 
       } 
      }, 
      min : 1241, 
      max : 4400, 
        lineWidth: 4, 
      lineColor:'#e8e8e8', 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       legend: { 
        layout: 'horizontal', 
        x: 0, 
        y: 40, 
        borderWidth: 0, 
      itemStyle: { 
       color: '#000000', 
       fontSize: '12px', 
        fontFamily: 'Arial, Helvetica, sans-serif' 
      } 
       }, 
       plotOptions: { 
        series: { 
         pointStart: Date.UTC(2010,0, 45), 
         pointInterval : 3*30*24*3600* 1000 + 1.25*24 * 3600 * 1000 
        } 
       }, 
       series: [{ 
        name: 'Upper Range', 
        color : 'grey', 
        lineWidth : 1, 
      connectNulls: true, 
        data: [1926,1931,1920,1912,1924,1947,2019,2516,2924,2648,2923,3119,3190,3400,null,null], 
      marker: { 
       fillColor: '#3dcd50', 
        lineWidth : 1, 
       symbol: 'circle', 
       radius : 3, 
         states: { 
          hover: { 
           fillColor:'#3dcd50', 
        lineWidth : 1 
          } 
         } 
        } 
       }, { 
        name: 'Average Range', 
        color : 'black', 
      connectNulls: true, 
        lineWidth : 2, 
        data: [1826,1825,1820,1812,1810,1826,1919,2387,2440,2484,2787,3000,3048,3100,null,null], 
      marker: { 
       fillColor: '#feb421', 
         lineColor: '#feb421', 
         lineWidth : 2, 
       symbol: 'circle', 
       radius : 5, 
         states: { 
          hover: { 
           fillColor:'#ff6700', 
        lineWidth : 2 
          } 
         } 
        } 

       }, { 
        name: 'Lower Range', 
        color : 'grey', 
        lineWidth : 1, 
      connectNulls: true, 
        data: [1726,1725,1720,1712,1710,1726,1810,2281,2325,2346,2663,2861,2948,2989,null,null], 
      marker: { 
       fillColor: '#e5928a', 
        lineWidth : 1, 
       symbol: 'circle', 
       radius : 3, 
         states: { 
          hover: { 
           fillColor:'#e5928a', 
        lineWidth : 1 
          } 
         } 
        } 
       }] 
      });  
}); 

您可以的jsfiddle http://jsfiddle.net/QGNT3/ 這是工作中的鉻細,Safari瀏覽器,火狐,IE9 & IE10但IE 8看到這一點,有一些錯誤 1)Y軸標籤不垂直對齊 2)對象不支持方法的「的removeAttribute」屬性消磨點擊傳說和懸停串聯 3)不使所述系列線顏色[渲染黑色]Highchart對象不支持的removeAttribute和Y軸標籤未對齊[Internet Explorer 8中]

+0

我在IE8中打開了您的示例http://jsfiddle.net/QGNT3/show/(因爲jsfiddle.net與IE8不兼容,所以http:// jsfiddle。淨/ QGNT3 /會產生錯誤),並且所有工作都正常。你有哪個版本的IE8? –

回答

0
  • 嘗試清除緩存IE8電子
  • 嘗試更新了jQuery通過IE8支持的版本
0

1)& & 3) - 完美的作品對我來說,看到的圖像:ie8

2)刪除多餘的逗號,請參閱修正示例:http://jsfiddle.net/QGNT3/1/fontFamily: 'Arial, Helvetica, sans-serif', < - here)

相關問題