как улучшить производительность в 3D-графике

Question

Мне нужно нарисовать несколько серий, используя 3D-график, поэтому я тестирую High-Chatter Scatter 3D, как это демо:

// 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, нажмите на ссылку для просмотра: http://jsfiddle.net/willxiang/x7wqfLh3/

если я отключил маркер (plotOptions-> series-> marker: false), он выглядит идеально. Но мне нужно показывать всплывающие подсказки, когда мышь перемещается по серии, чтобы отобразить информацию о точке, поэтому я включил маркер, и производительность диаграммы плохая ... (в этой демонстрации 4 серии, 4000 баллов) Пожалуйста, кто-нибудь поможет мне улучшить производительность ~ Спасибо!

Answer 1

После копания в нем, я думаю, что единственное, что можно сделать, это отключить маркеры при вращении 3d и включить, когда он закончится. Производительность еще не идеальна, но это все, что можно сделать, чтобы увеличить ее для этих условий.

Демонстрация: 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();
    }
  });
});