javascript - 将散点图转换为折线图

Question

我有一个 scatterChart，在 nvd3 中有太多点，看起来像这样:

浏览器渲染大量点是一项计算量非常大的任务，所以我想使用 [x, y] 数据实际绘制一个 nvd3 lineChart我得到的。基本上我想要图表上的颜色区域，而不是由单个点创建的颜色区域。有没有办法做到这一点？您还能提出什么建议？

我尝试对我拥有的数据进行随机抽样，但我不喜欢它，因为性能的改进是适度的，而且我确实在丢失数据。

Answer 1

我建议将 Highcharts 与 boost 一起使用通过 WebGL 而不是默认 SVG 呈现图表系列的功能:

• https://api.highcharts.com/highcharts/boost

• https://www.highcharts.com/blog/news/175-highcharts-performance-boost/

这是一个片段，显示了一个包含 5 个系列的总计 1000000 点的散点图:

// Prepare the data
var n = 1000000/5,
    i, k,
    s = 5;
var series = [];
for (k = 0; k < s; k += 1) {
	var data = [];
  var cx = Math.random()* 90,
      cy = Math.random()* 90,
      radius = 10+Math.random()*30
  for (i = 0; i < n; i += 1) {
      var pt_angle = Math.random() * 2 * Math.PI;
      var pt_radius_sq = Math.random() * radius * radius;
      var x = Math.sqrt(pt_radius_sq) * Math.cos(pt_angle);
      var y = Math.sqrt(pt_radius_sq) * Math.sin(pt_angle);
  		data.push([cx+x, cy+y]);
  }
  console.log('serie'+k,'nr. points',data.length);
  series.push({
    type: 'scatter',
    data: data,
    marker: {
      radius: 0.1
    },
    tooltip: {
      followPointer: false,
      pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
    }
  });
}

if (!Highcharts.Series.prototype.renderCanvas) {
    throw 'Module not loaded';
}

console.time('scatter');
Highcharts.chart('container', {
    chart: {
        zoomType: 'xy',
        height: '100%'
    },
    colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
    '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
    boost: {
        useGPUTranslations: true,
        usePreAllocated: true
    },
    xAxis: {
        min: 0,
        max: 100,
        gridLineWidth: 1
    },
    yAxis: {
        // Renders faster when we don't have to compute min and max
        min: 0,
        max: 100,
        minPadding: 0,
        maxPadding: 0,
        title: {
            text: null
        }
    },
    title: {
        text: 'Scatter chart with 1 million points'
    },
    legend: {
        enabled: false
    },
	  credits: {
        enabled: false
    },
    series: series
});
console.timeEnd('scatter');

#container {
	min-width: 380;
	max-width: 600px;
	margin: 0 auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

1000000 点的 Jsfiddle 散点图:http://jsfiddle.net/beaver71/zyzpwgbv/