Question

我使用6种不同的绘图带阵列在我的高级图表的背景中创建颜色 - 我用它来显示一个国家的车辆运动。

当图形首先加载时，它会将所有波段挤压在一起（不会在它们之间留下空白区域），但在刷新或相同数据的第二次加载时，它会完美显示。

我没有收到任何javascript错误，也没有尝试缓存js文件（通过向请求添加时间戳）。完全清除浏览器缓存后，我也对此进行了测试。

有什么想法吗？它曾经偶尔发生，当时我只有一个情节带，但它似乎不断发生，因为我添加了一些

在firefox和chrome中都进行了测试，两者都有相同的问题

它是一个大文件，但我的代码片段在下面

        for(var i = 0; i < speedArray.length; i++) 
        {
            var fromTimestamp   = speedArray[i][0];
            var toTimestamp     = speedArray[i][1];

            $('#fuelLevelGraph').highcharts().xAxis[0].addPlotBand({
            from: fromTimestamp,
            to: toTimestamp,
            color: '#ff33ff'
            });
        }

        for(var i = 0; i < speedArrayUK.length; i++) 
        {
            var fromTimestamp   = speedArrayUK[i][0];
            var toTimestamp     = speedArrayUK[i][1];

            $('#fuelLevelGraph').highcharts().xAxis[0].addPlotBand({
            from: fromTimestamp,
            to: toTimestamp,
            color: '#ff9999'
            });
        }


        for(var i = 0; i < speedArrayIRL.length; i++) 
        {
            var fromTimestamp   = speedArrayIRL[i][0];
            var toTimestamp     = speedArrayIRL[i][1];

            $('#fuelLevelGraph').highcharts().xAxis[0].addPlotBand({
            from: fromTimestamp,
            to: toTimestamp,
            color: '#66ff66'
            });
        }   

        for(var i = 0; i < speedArrayFR.length; i++) 
        {
            var fromTimestamp   = speedArrayFR[i][0];
            var toTimestamp     = speedArrayFR[i][1];

            $('#fuelLevelGraph').highcharts().xAxis[0].addPlotBand({
            from: fromTimestamp,
            to: toTimestamp,
            color: '#6666ff'
            });
        }   


        for(var i = 0; i < speedArraySP.length; i++) 
        {
            var fromTimestamp   = speedArraySP[i][0];
            var toTimestamp     = speedArraySP[i][1];

            $('#fuelLevelGraph').highcharts().xAxis[0].addPlotBand({
            from: fromTimestamp,
            to: toTimestamp,
            color: '#ffff00'
            });
        }

        for(var i = 0; i < speedArrayBE.length; i++) 
        {
            var fromTimestamp   = speedArrayBE[i][0];
            var toTimestamp     = speedArrayBE[i][1];

            $('#fuelLevelGraph').highcharts().xAxis[0].addPlotBand({
            from: fromTimestamp,
            to: toTimestamp,
            color: '#996633'
            });
        }

我已确保对每个进行排序以避免高图错误＃15。下面的图片将向您展示会发生什么

Image: First load

Image: After Refresh

Answer 1

数据源（mssql表）在第一次加载时错误地排序结果 - 强制订单（使用ORDER BY）修复了问题

Highcharts在首次加载时无法正确渲染绘图带

1 个答案: