how to improve highcharts scatter 3d performance

Question

I have to draw multi series by using 3d plot so I've test highcharts scatter 3d like this demo:

// Set up the chart
var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'scatter',
    options3d: {
      enabled: true,
      alpha: 10,
      beta: 30,
      depth: 250,
      viewDistance: 15,
      fitToPlot: false,
    }
  },
  yAxis: {
    min: 0,
    max: 10,
    title: null
  },
  xAxis: {
    min: 0,
    max: 10,
    gridLineWidth: 1
  },
  zAxis: {
    min: 0,
    max: 10,
    showFirstLabel: false
  },
  plotOptions: {
    series: {
      marker: {
        enabled: true
      },
      lineWidth: 2,
    }
  },
  series: [{
    lineColor: 'red',
    data: (function() {
      var data = [];
      for (var i = 0; i < 1000; i++) {
        data.push([i / 100, 3 + Math.random(), 0]);
      }
      return data;
    })()
  },{
    lineColor: 'blue',
    data: (function() {
      var data = [];
      for (var i = 0; i < 1000; i++) {
        data.push([i / 100, 3 + Math.random(), 3]);
      }
      return data;
    })()
  },{
    lineColor: 'green',
    data: (function() {
      var data = [];
      for (var i = 0; i < 1000; i++) {
        data.push([i / 100, 3 + Math.random(), 6]);
      }
      return data;
    })()
  },{
    lineColor: 'yellow',
    data: (function() {
      var data = [];
      for (var i = 0; i < 1000; i++) {
        data.push([i / 100, 3 + Math.random(), 9]);
      }
      return data;
    })()
  }
  /* ,{
    lineColor: 'black',
    type: 'polygon',
    data: (function() {
      var data = [];
      for (var i = 0; i < 100; i++) {
        data.push([3, 3 + 5 * Math.random(), i / 10]);
      }
      data.push([3, 0, i / 10]);
      data.push([3, 0, 0])
      return data;
    })()
  } */
  ]
});














// Add mouse events for rotation
$(chart.container).on('mousedown.hc touchstart.hc', function(eStart) {
  eStart = chart.pointer.normalize(eStart);

  var posX = eStart.pageX,
    posY = eStart.pageY,
    alpha = chart.options.chart.options3d.alpha,
    beta = chart.options.chart.options3d.beta,
    newAlpha,
    newBeta,
    sensitivity = 5; // lower is more sensitive

  $(document).on({
    'mousemove.hc touchdrag.hc': function(e) {
      // Run beta
      newBeta = beta + (posX - e.pageX) / sensitivity;
      chart.options.chart.options3d.beta = newBeta;

      // Run alpha
      newAlpha = alpha + (e.pageY - posY) / sensitivity;
      chart.options.chart.options3d.alpha = newAlpha;

      chart.redraw(false);
    },
    'mouseup touchend': function() {
      $(document).off('.hc');
    }
  });
});

plz click the link to view:http://jsfiddle.net/willxiang/x7wqfLh3/

if i disabled marker (plotOptions->series->marker:false)，it look like perfect. But i need show tooltips when mouse move on series to display the point info,so i enabled marker, and the chart performance is bad...(in this demo 4 series 4000 point) Please anybody help me to improve performance ~ Thanks !

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-04-16T14:38:24

After digging into it I think that the only for could be done for it is disabling markers while 3d rotating and enabling when it is finished. The performance is not perfect still but that is all that could be done to increase it for those conditions.

Demo: http://jsfiddle.net/BlackLabel/m4rpfdn0/

// Add mouse events for rotation
$(chart.container).on('mousedown.hc touchstart.hc', function(eStart) {
  eStart = chart.pointer.normalize(eStart);

  var posX = eStart.pageX,
    posY = eStart.pageY,
    alpha = chart.options.chart.options3d.alpha,
    beta = chart.options.chart.options3d.beta,
    newAlpha,
    newBeta,
    sensitivity = 5; // lower is more sensitive

  $(document).on({
    'mousemove.hc touchdrag.hc': function(e) {
      chart.tooltip.destroy();
      chart.series.forEach(function(s) {
        s.update({
          marker: {
            enabled: false
          }
        }, false)
      });
      // Run beta
      newBeta = beta + (posX - e.pageX) / sensitivity;
      if (Math.abs(chart.options.chart.options3d.beta - newBeta) > 5) {
        chart.options.chart.options3d.beta = newBeta;
      }

      // Run alpha
      newAlpha = alpha + (e.pageY - posY) / sensitivity;
      if (Math.abs(chart.options.chart.options3d.alpha - newAlpha) > 5) {
        chart.options.chart.options3d.alpha = newAlpha;
      }

      chart.redraw(false);
    },
    'mouseup touchend': function() {
      $(document).off('.hc');
      chart.tooltip.destroy();

      chart.series.forEach(function(s) {
        s.update({
          marker: {
            enabled: true
          }
        }, false)
      });
      chart.redraw();
    }
  });
});

how to improve highcharts scatter 3d performance

1 Answers