2

我是 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）（日期时间，浮点数）笛卡尔点组成，我希望在散点图上可视化。我得到了我想要的东西，但它似乎让我的浏览器变得非常缓慢。特别是如果我重新调整窗口大小或将鼠标悬停在工具提示上。寻找任何建议或技巧来优化性能或指出（不是双关语）我应该为这种可视化做的其他事情。

4

1 回答 1

0

您可以做的几件事是删除图表本身的动画和工具提示。此外，如果您能侥幸成功，您只能为每 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>';
    }
},
于 2013-03-07T18:47:29.583 回答