Question

我正在使用Highcharts儀表。在Chrome/Firefox/Safari瀏覽器中完美工作 - 不管IE計量針是否出現在IE中。這在PHP中得到了迴應。代碼中的「// Add some life」部分全部設置爲0，以便針不移動。

echo "<div id='gauges'><h2>Points Achievements 
</h2><div id='junior' class='gauge'> 
<script type='text/javascript'> 
$(function() { 

$('#junior').highcharts({ 

    chart: { 
     type: 'gauge', 
     plotBackgroundColor: null, 
     plotBackgroundImage: null, 
     plotBorderWidth: 0, 
     plotShadow: false, 
     backgroundColor:'rgba(255, 255, 255, 0.1)' 
    }, 

    credits: { 
    enabled: false 
    }, 

    title: { 
     text: 'Junior Club Award' 
    }, 

    pane: { 
     startAngle: -150, 
     endAngle: 150, 
     background: [{ 
      backgroundColor: { 
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
       stops: [ 
        [0, '#FFF'], 
        [1, '#333'] 
       ] 
      }, 
      borderWidth: 0, 
      outerRadius: '109%' 
     }, { 
      backgroundColor: { 
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
       stops: [ 
        [0, '#333'], 
        [1, '#FFF'] 
       ] 
      }, 
      borderWidth: 1, 
      outerRadius: '107%' 
     }, { 
      // default background 
     }, { 
      backgroundColor: "; if($junior_sum >= 25){ echo "'#B1FCBC'";}else{ echo "'#DDD'"; } echo", 
      borderWidth: 0, 
      outerRadius: '101%', 
      innerRadius: "; if($junior_sum >= 25){ echo "'1%'";}else{ echo "'100%'"; } echo " 
     }] 
    }, 

    // the value axis 
    yAxis: { 
     min: 0, 
     max: 25, 

     minorTickInterval: 'auto', 
     minorTickWidth: 1, 
     minorTickLength: 10, 
     minorTickPosition: 'inside', 
     minorTickColor: '#666', 

     tickPixelInterval: 30, 
     tickWidth: 2, 
     tickPosition: 'inside', 
     tickLength: 10, 
     tickColor: '#666', 
     labels: { 
      step: 2, 
      rotation: 'auto' 
     }, 
     title: { 
      text: 'You have...' 
     }, 
     plotBands: [{ 
      from: 0, 
      to: " . $junior_sum .", 
      color: '#009FF5' // dark blue 
     },{ 

      from: " . $junior_sum . " , 
      to: 25, 
      color: '#92CFF0' // light blue 

     }, 

        ]   
     }, 

    series: [{ 
     name: 'Points Earned', 
     data: [" . $junior_sum . "], 
     tooltip: { 
      valueSuffix: '' 
     } 
    }] 

}, 
// Add some life 
function (chart) { 
    if (!chart.renderer.forExport) { 
     setInterval(function() { 
      var point = chart.series[0].points[0], 
       newVal, 
       inc = 0; 

      newVal = point.y + inc; 
      if (newVal < 0 || newVal > 200) { 
       newVal = point.y - inc; 
      } 

      point.update(newVal); 

     }, 3000); 
    } 
}); 
});"; 

echo "</script></div>"; 

Answer 1

在代碼你plotBands部分你有一個懸空逗號：

plotBands: [{ 
       from: 0, 
       to: " . $junior_sum .", 
       color: '#009FF5' // dark blue 
      }, { 

       from: " . $junior_sum . ", 
       to: 25, 
       color: '#92CFF0' // light blue 

      }, //here is your dangling comma 

      ] 

IE不善待那些。既然不要用數據列出你的實際js，if語句不會解析，但我會在那裏檢查無效的語法。如果可能的話，建立一個jsFiddle，這個js看起來像圖表一旦它被PHP解析後的樣子。