highchartのx軸をDBから抽出した日付にしたい

Question

タイトルの通りなのですが、現在DBから日付毎のデータをカウントして変数に入れてます。
date 件数
2017/01/10 10
2017/01/11 15
・ ・
・ ・
・ ・
のようになっています。

これをhighchartのグラフで日付毎に表示したいのですがどうしたらいいでしょうか？
よろしくお願いします。

Comments

[m.ts10806]

データベースの構成・現在のソースコードをご提示ください。

Answer 1

2つ前の質問を拝見するとhighcharts(highchartじゃなくhighchartsですね?)で棒グラフを表示するなどは既にやっておられるようです。ゆえにDBアクセスによって得られた日付データの表示形式をどうやって期待通りのものにするかという点が課題なのではないかと想像しました。

highchartsにも日付などのフォーマットを手軽に指定できるオプションがあるようでしたが、自分にはcategoriesに日付データを指定する方法において、その日付を手軽にフォーマットするためのオプションがすぐに見つからなかったので、愚長な例として自前でDate->Stringへ変換してcategoriesへ指定する方法をやってみました。

以下では変数dateArrayが配列で、要素がDate、表示させたい形式がYYYY/mm/ddであると想定しています。

function formatDate(v) {
  var y = v.getFullYear(),
      m = ('0' + (v.getMonth() + 1)).slice(-2),
      d = ('0' + v.getDate()).slice(-2);
  return y + '/' + m + '/' + d;
}

// dateArrayに日付の配列が格納されていると仮定
...
$(...).highcharts({
  ...
  xAxis: {
    categories: dateArray.map(formatDate)
  }
  ...
});
...

きっとformatDateなどの関数を書かなくてもhighchartsにもっとスマートな指定方法があるような気はしますが・・・

なお、上記ではDBアクセスの結果セットをどのような形式で変数へ格納しているかとか、DBからの日付データがjavascriptのどのようなオブジェクトとして表現されているかについてのバリエーションの可能性は考えていません。例えば日付データがDate以外の型なら処理は変わるでしょうが考え方としては似た方法が取れると思います。