使用boost.js作为Highcharts时，散点图点会失去颜色

Question

我一直试图弄清楚为什么当使用boost.js模块进行Highcharts时，散点图上每个点的颜色都会消失。我需要boost.js模块，因为我生成的点数太多了，如果不使用boost.js，网站的性能会大大降低。

我做了一个小提琴来模拟我想要完成的事情。

如果您在小提琴中注释掉了boost.js脚本参考，您将会看到散点图上每个点的颜色与我尝试实现的方式相同，但请注意网站上的效果非常差。

我需要boost.js提供的性能，同时仍保持每个散点图的颜色。

所以我的问题是，在保持性能的同时，如何保持每个点的颜色？

更新：

没有 boost.js https://jsfiddle.net/rtunis/9rLdfzq7/4/

WITH boost.js https://jsfiddle.net/rtunis/9rLdfzq7/3/

使用Javascript：

var data = [];

for (var i = 0; i < 350; i++) {
    for (var j = 0; j < 350; j++) {
        var point = {
            datum: i,
            y: i,
            x: j,
            color: "hsla(" + Math.floor((Math.random() * 100) + 1) + ", 100%, 50%, 0.75)"
        };
        data.push(point);
    }
}

// create the chart and store it
var chart = new Highcharts.Chart({
    chart: {
        type: 'scatter',
        renderTo: 'map',
        panning: true,
        panKey: 'shift'
    },
    title: {
        text: 'TestTitle'
    },
    subtitle: {
        text: 'Subtitle Test'
    },
    xAxis: {
        title: {
            text: 'Longitude'
        },
        startOnTick: true,
        endOnTick: true,

    },
    yAxis: {
        title: {
            text: 'Latitude'
        }
    },
    plotOptions: {
        scatter: {
            allowPointSelect: true,
            marker: {
                symbol: 'square',
                radius: 1
            },
            states: {
                hover: {
                    halo: {
                        opacity: 0.75,
                        size: 4,
                        attributes: {
                            zIndex: 4,
                            fill: 'gray',
                            'stroke-width': 1,
                            stroke: 'black'
                        }
                     }
                  }
              },
      tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '<b>Datum:</b> {point.datum:.2f}<br/><b>Longitude:</b> {point.x:.5f}<br/><b>Latitude:</b> {point.y:.5f}<br/>'
      },
      turboThreshold: 150000
    }
  },
  responsive: {
      rules: [{
          condition: {
              maxWidth: 500,
              minWidth: 500
          }
      }]
  },
  series: [{
      name: 'SeriesName',
      data: data,
  }]
});