Question

我正在使用Highcharts仪表。在Chrome / Firefox / Safari中完美运行 - 无论测量针是否出现在IE中。这在PHP中得到了回应。代码的“//添加生命”部分全部设置为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语句不解析，但我会检查那里是否有无效的语法。如果可能的话，一旦PHP被PHP解析，就会为图表提供一个jsFiddle。

Highcharts仪表在IE8中不起作用

1 个答案: