javascript - 如何提高 highcharts scatter 3d 性能

Question

我必须使用 3d 绘图来绘制多系列，所以我测试了 highcharts 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');
    }
  });
});

请点击链接查看：http: //jsfiddle.net/willxiang/x7wqfLh3/

如果我禁用了标记（plotOptions->series->marker:false），它看起来很完美。但是当鼠标在系列上移动时我需要显示工具提示以显示点信息，所以我启用了标记，并且图表性能很差......（在这个演示中 4 系列 4000 点）请任何人帮助我提高性能〜谢谢！

标签： javascripthighcharts

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();
    }
  });
});