2

私はハイチャートが初めてで、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>

とにかく、散布図で視覚化したい(datetime、float)デカルト点の大規模なセット(〜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 に答える