Question

scatterChart中nvd3的{{1}}分数太多，看起来像这样：

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

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

Answer 1

我建议使用具有boost功能的Highcharts，该功能通过WebGL呈现图表系列而不是默认的SVG：

这是一个片段，显示一个Scatter Chart，其中有5个系列，总计1000000点：

＆＃13;

// 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');

＆＃13;

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

＆＃13;

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

＆＃13;

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

将scatterChart转换为lineChart

1 个答案: