Highcharts 散点图性能答案

【问题标题】：Highcharts Scatter Plot PerformanceHighcharts 散点图性能
【发布时间】：2013-03-08 02:47:29
【问题描述】：

我是 Highcharts 的新手，在 jsFiddle 上一直在修改它。

独立于小提琴的示例如下所示：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

$(function() {

var chart;
$(document).ready(function() {

chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
          type: 'scatter',
          zoomType: 'xy'
    },

    xAxis: {
        type: 'datetime'

    },
    series: [{
        color: 'rgba(223, 83, 83, .5)',
        data:
        [[Date.UTC(2012,10,15,12,25,47), 90.7000],
          // Many more data points here, see fiddle for complete list
         [Date.UTC(2013,2,7,11,37,18), 199.5000],
         [Date.UTC(2013,2,7,11,37,18), 199.5000]]
    }]

});
    });

});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 300px"></div>
</body>
</html>

无论如何，我有一个系列，其中包含我希望在散点图上可视化的一大组 (~16k) (datetime,float) 笛卡尔点。我得到了我想要的，但它似乎让我的浏览器变得非常缓慢。特别是如果我重新调整窗口大小或将鼠标悬停在工具提示上。寻找任何建议或技巧来优化性能或指出（不是双关语）我应该为这种可视化做的其他事情。

【问题讨论】：

标签： highcharts

【解决方案1】：

您可以做的几件事是删除图表本身的动画和工具提示。此外，如果你能侥幸成功，你只能每 10 个点渲染一个工具提示。

http://jsfiddle.net/Jx5n2/3653/

chart: {
    renderTo: 'container',
    type: 'scatter',
    zoomType: 'xy',
    animation:false
},

tooltip:{
    animation:false,
    formatter:function(){
        if(this.x % 10 != 0) return false;
        return 'The value for <b>'+ this.x +
                '</b> is <b>'+ this.y +'</b>';
    }
},

【讨论】：