将scatterChart转换为lineChart [英] Convert scatterChart into lineChart

问题描述

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

I have a scatterChart with too many points in nvd3 that looks like that:

对于浏览器来说，要渲染大量点是一项计算量很大的任务，因此我想实际使用获得的[x，y]数据绘制nvd3 lineChart.基本上，我需要图表上的颜色区域，而不是各个点创建的颜色区域.有没有办法做到这一点?您还能提出什么建议?

It is very computationally intense task for the browser to render a plenty of points, so I want to actually draw an nvd3 lineChart using the [x, y] data that I got. Basically I want areas of colors on my chart, and not the areas of color created by individual points. Is there a way to do that? What other things could you propose?

我尝试对我拥有的数据进行随机采样，但是我不喜欢它，因为性能的改善是中等的，而且我真的丢失了数据.

I tried random sampling of the data that I have but I do not like it since the improvement in performance is moderate and I am really losing data.

推荐答案

我建议将Highcharts与 提升 功能，该功能通过WebGL而不是默认的SVG呈现图表系列:

I suggest to use Highcharts with boost feature which renders chart series by WebGL instead of the default SVG:

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

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

以下是显示具有5个系列的散点图的片段，总计1000000点:

Here is a snippet showing a Scatter Chart with 5 series for 1000000 points total:

// 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/

Jsfiddle Scatter Chart with 1000000 points: http://jsfiddle.net/beaver71/zyzpwgbv/

这篇关于将scatterChart转换为lineChart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！