昨日の記事でHighchartsについて話題にしました。今日は実際にHighchartsを使った際に思いっきりハマったところがあるので、そこについて書いておきます。

昨日紹介したシンプルな例ではHighchartsに渡したデータ列には値のみが入っていました。このようなケースではデータ数は問題になりません（リファレンスによるとそのはず）。

ですが、Highchartsではデータ1つ一つに名前を付けたり任意のキーで値を渡したりできます。

1つ一つのデータはjson的な構造になっています。yというキーはY軸用の値、nameというキーはツールチップに用いられる名前用の値です。それ以外にも任意のキーを使うことができます。

$(function () {
        $('#chart').highcharts({
            series: [{
                data: [{y:3,name:"s6w1vnde"},{y:7,name:"t4g5qc7h”},…]
            }]
        });
    });

このようなデータを渡す場合はデフォルトのデータ上限が1000までとなっていて、1000よりも多いデータを渡すと何も表示されなくなってしまいます。エラーは出ません。

確認のためにデータ数を1001にしてみます。

resultタブを見ればわかりますが、グラフが描画されていません。

どうせなんかパラメータがあるんだろうと思ってHighchartsのリファレンスをlimitとかmaxで検索したのですが全然ヒットせず、困り果てました。

結局なんだったかというと、turboThresholdとかいう直感的でないパラメータがありました。わかりづれえ！

このturboThresholdは次のような感じで設定します。

$('#chart').highcharts({
  series: [{
    turboThreshold: 0, // ゼロで無制限、数値でその値まで許す
    data: […]
  }]
});

さきほどと同じデータ数ですが、こちらは表示されます。