Question

我是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）笛卡尔点，我希望在散点图上可视化。我得到了我想要的东西，但它似乎让我的浏览器真的很迟钝。特别是如果我重新调整窗口大小或将鼠标悬停在工具提示上。寻找任何建议或提示，以优化性能或指出（没有双关语）我应该做的其他事情，而不是这种可视化。

Answer 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>';
    }
},

Highcharts Scatter Plot Performance

1 个答案: