UI -> 概要

Posted by muchag | jQuery |
初回投稿:2015-04-07 (火) 16:43:17 | 最終更新:2015-04-07 (火) 16:46:49

jQuery のユーザーインターフェース担当。

jQuery UI

DL

jQuery UI:Download Builder
ここから、全体、もしくは必要機能に絞った DL ができる。

テーマ

ユーザーインターフェースのテーマが、デフォルトで24種類用意されている。

jQuery UI:ThemeRoller
ここの左ペインにある ThemeRoller。
Roll Your Own タブでカスタマイズができる。
Gallary タブで、デフォルト24種類を一覧できる。

Posted by muchag | jQuery |
初回投稿:2015-04-07 (火) 16:43:17 | 最終更新:2015-04-07 (火) 16:46:49

.each()

Posted by muchag | jQuery |
初回投稿:2015-04-05 (日) 21:56:46 | 最終更新:2016-02-27 (土) 12:06:10

エレメント集合の1つ1つに順番にアクセスするメソッド。

jQuery:.each()

【環境】
jQuery:1.11.2
書式
  1. <ul>
  2.   <li>foo</li>
  3.   <li>bar</li>
  4. </ul>
  1. $( "li").each(function(index) {
  2.   console.log(index + ": " + $(this).text());
  3. });

 

continue, break

continue → return true
break → return false

地潜の日記:jQuery の each() の continue / break は・・・

Posted by muchag | jQuery |
初回投稿:2015-04-05 (日) 21:56:46 | 最終更新:2016-02-27 (土) 12:06:10

jquery.combobox.js

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-04-03 (金) 10:15:30 | 最終更新:2015-04-03 (金) 10:15:30

選択、入力ともにできるコンポーネントが欲しくて
コンボボックスのやり方を調べてみた。

HTML5 になって、テキストボックスに候補を表示することができるようになったみたいだけど、オートコンプリート機能のためらしく、1文字入れるだけで候補が絞られちゃう。
仕方ないので、JavaScript で実現。
作者の方、ありがとうございます!

DL

SQL の窓:使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
のリンクから
jquery.combobox.js
style.css
をいただいてきた。

導入

上記プラグインファイルと CSS ファイルを読み込む。

  1. <input type="text" id="hoge" />
  1. $( '#hoge' ).combobox([
  2.     '1',
  3.     '2',
  4.     '3',
  5. ]);

これで終わり!
かんた~ん♪

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-04-03 (金) 10:15:30 | 最終更新:2015-04-03 (金) 10:15:30

Highstock -> ローソク足(CandleStick)

Posted by muchag | JavaScript |
初回投稿:2015-03-31 (火) 16:56:55 | 最終更新:2015-04-01 (水) 16:09:35

【環境】
Highstock 2.1.4
tooltip

ツールチップのカスタマイズ。

formatter
  1. var options = {
  2.     tooltip: {
  3.         formatter: function() {
  4.             var s = '';
  5.  
  6.             $.each( this.points, function( i, point ) {
  7.                 s += moment.utc( point.x ).format( 'YYYY-MM-DD' ) + '<br />';
  8.                 s += '<b>' + moment.utc( point.x ).format( 'hh:mm' ) + '</b><br />';
  9.                 s += '始値:' + point.point.open + '<br />';
  10.                 s += '高値:' + point.point.high + '<br />';
  11.                 s += '安値:' + point.point.low + '<br />';
  12.                 s += '終値:' + point.point.close;
  13.             });
  14.  
  15.             return s;
  16.         },
  17.     },
  18. };
i

引数の i は、index
複数データ系列(series)の場合には、index で、どのデータ系列の値かを判別。

  1. $.each( this.points, function( i, point ) {
  2.     if ( i == 0 ) {
  3.         s += moment.utc( point.x ).format( 'YYYY-MM-DD' ) + '<br />';
  4.         s += '<b>' + moment.utc( point.x ).format( 'hh:mm' ) + '</b><br />';
  5.         s += '始値:' + point.point.open + '<br />';
  6.         s += '高値:' + point.point.high + '<br />';
  7.         s += '安値:' + point.point.low + '<br />';
  8.         s += '終値:' + point.point.close + '<br />';
  9.     }
  10.     else {
  11.         s += '売買高:' + point.point.y;
  12.     }
  13. });
point

こちらの場合は、始値などは point.open では undefined となり
point.point.open でないと取れなかった。

pointFormat
  1. var options = {
  2.     tooltip: {
  3.         pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}:<br/>始値: {point.open:.2f} <br> 高値: {point.high} <br> 安値: {point.low} <br> 終値: {point.close}' ,
  4.     },
  5. };

{point.open:.2f} とすることで、有効桁数が小数点第2位までとなるみたい。

{point.x} とすることで、X軸値を取ることができたけど
タイムスタンプの整形する方法がわからなかった。

参考サイト

Highcharts:OHLC and Candlestick Localization
stackoverflow:Highstock – How can i display the open, high, low, close in the line or area charts tooltip

Posted by muchag | JavaScript |
初回投稿:2015-03-31 (火) 16:56:55 | 最終更新:2015-04-01 (水) 16:09:35

Highcharts 4.1.4

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-03-30 (月) 14:20:41 | 最終更新:2016-01-17 (日) 11:53:06

歩み値からチャートについて
Flotr2 で頑張ってみたけど
X軸値が日付(タイムスタンプ)のせいか、うまくローソクの幹を描画できなかったので
Highcharts を試してみる。

2016-01-17

バージョンアップが行われたので、念のため新しく書き直し。
新記事:Highcharts 4.2.1

2016-01-17
【環境】
Highcharts 4.1.4
Highstock 2.1.4
Highmaps 1.1.4
導入
ダウンロード

Highcharts:Download
ここにダウンロード用のリンクがある。

Highcharts 4.1.4
Highstock 2.1.4
Highmaps 1.1.4
3種あり、Highstock Demos › Candlestick を見る限りでは
ローソク足を実現するには、Highstock みたい。

オリジナルパッケージ

必要な物だけをパッケージしてくれる
Download builder (experimental)
というものもある。

直リンク

Highcharts へリンクを張るのでもいいみたい。

… or just grab the files directly from code.highcharts.com.

  1. <script src="http://code.highcharts.com/stock/highstock.js"></script>
  2. <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
書式
  1. $( '#chart_candlestick' ).highcharts( 'StockChart', getOptions() );
基本設定

Highcharts:Options Reference
Highcharts
Highstock
部品説明
Highmaps

navigator

navigator

adaptToUpdatedData

データがアップデートされたときに、ナビゲーターを最適化するか。

これを false にして、リアルタイム更新グラフを作成すると
X軸の表示幅が自動で変更にならないので
グラフは生成されているのに、見えないエリアが出てくる。

デフォルトは true。

plotOptions(描画オプション?)
series
marker

プロットマーカーの表示、非表示。

  1. enabled: false,
turboThreshold

データ個数最大値。
デフォルトが 1000。
0 で無制限。

PILOG:Highcharts JSは1000件を超えるデータはプロットできません。デフォルトでは。

xAxis(X軸)

xAxis

gridLineWidth

0 に設定すると、縦のグリッド線は引かれない。

minRange

X軸ズームの最低値。

range

X軸値の表示幅?

識別子
日時
識別子 内容
%Y 西暦:4桁
%y
%m 月:2桁(0Full)
%b 月:英語3桁
%d 日:2桁(0Full)
%e
%H 時:2桁(0Full)
%M 分:2桁(0Full)
%S 秒:2桁(0Full)
%L ミリ秒:3桁(0Full)
Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-03-30 (月) 14:20:41 | 最終更新:2016-01-17 (日) 11:53:06

Flotr2 -> ローソク足(CandleStick)

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-03-28 (土) 19:00:47 | 最終更新:2015-03-31 (火) 11:56:27

歩み値からチャート推移を再現しようとして
このプラグインに当たった。

【環境】
Flotr2:バージョン不明
導入

Flotr2:Basic Candle
ここからサンプルソースをコピペ。

書式
  1. Flotr.draw(
  2.     target,
  3.     [data],
  4.     [options],
  5. )
target(描画対象)

チャートを描画するエレメントを指定。

  1. var target = document.getElementById( "chart_candlestick" );
  2.  
  3. var target = $( "#chart_candlestick" ); // jQuery 形式だとうまくいかない

jQuery 形式だとうまくいかない。
なぜかしらね~。

data(データ)
書式
  1. var data = [
  2.     [ X軸値, 始値, 高値, 安値, 終値 ],
  3.     [ X軸値, 始値, 高値, 安値, 終値 ],
  4.     ・・・
  5. ];
options(設定)

GitHub:flotr2.js

基本設定

1600行目辺りから基本設定。

  1. Flotr.defaultOptions = {
  2.     colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
  3.     ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
  4.     title: null, // => The graph's title
  5.     subtitle: null, // => The graph's subtitle
  6.     shadowSize: 4, // => size of the 'fake' shadow
  7.     defaultType: null, // => default series type
  8.     HtmlText: true, // => wether to draw the text using HTML or on the canvas
  9.     fontColor: '#545454', // => default font color
  10.     fontSize: 7.5, // => canvas' text font size
  11.     resolution: 1, // => resolution of the graph, to have printer-friendly graphs !
  12.     parseFloat: true, // => whether to preprocess data for floats (ie. if input is string)
  13.     preventDefault: true, // => preventDefault by default for mobile events. Turn off to enable scroll.
  14.     xaxis: {
  15.         ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  16.         minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  17.         showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
  18.         showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
  19.         labelsAngle: 0, // => labels' angle, in degrees
  20.         title: null, // => axis title
  21.         titleAngle: 0, // => axis title's angle, in degrees
  22.         noTicks: 5, // => number of ticks for automagically generated ticks
  23.         minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
  24.         tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
  25.         tickDecimals: null, // => no. of decimals, null means auto
  26.         min: null, // => min. value to show, null means set automatically
  27.         max: null, // => max. value to show, null means set automatically
  28.         autoscale: false, // => Turns autoscaling on with true
  29.         autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
  30.         color: null, // => color of the ticks
  31.         mode: 'normal', // => can be 'time' or 'normal'
  32.         timeFormat: null,
  33.         timeMode:'UTC', // => For UTC time ('local' for local time).
  34.         timeUnit:'millisecond',// => Unit for time (millisecond, second, minute, hour, day, month, year)
  35.         scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
  36.         base: Math.E,
  37.         titleAlign: 'center',
  38.         margin: true // => Turn off margins with false
  39.     },
  40.     x2axis: {},
  41.     yaxis: {
  42.         ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  43.         minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  44.         showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
  45.         showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
  46.         labelsAngle: 0, // => labels' angle, in degrees
  47.         title: null, // => axis title
  48.         titleAngle: 90, // => axis title's angle, in degrees
  49.         noTicks: 5, // => number of ticks for automagically generated ticks
  50.         minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
  51.         tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
  52.         tickDecimals: null, // => no. of decimals, null means auto
  53.         min: null, // => min. value to show, null means set automatically
  54.         max: null, // => max. value to show, null means set automatically
  55.         autoscale: false, // => Turns autoscaling on with true
  56.         autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
  57.         color: null, // => The color of the ticks
  58.         scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
  59.         base: Math.E,
  60.         titleAlign: 'center',
  61.         margin: true // => Turn off margins with false
  62.     },
  63.     y2axis: {
  64.         titleAngle: 270
  65.     },
  66.     grid: {
  67.         color: '#545454', // => primary color used for outline and labels
  68.         backgroundColor: null, // => null for transparent, else color
  69.         backgroundImage: null, // => background image. String or object with src, left and top
  70.         watermarkAlpha: 0.4, // =>
  71.         tickColor: '#DDDDDD', // => color used for the ticks
  72.         labelMargin: 3, // => margin in pixels
  73.         verticalLines: true, // => whether to show gridlines in vertical direction
  74.         minorVerticalLines: null, // => whether to show gridlines for minor ticks in vertical dir.
  75.         horizontalLines: true, // => whether to show gridlines in horizontal direction
  76.         minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
  77.         outlineWidth: 1, // => width of the grid outline/border in pixels
  78.         outline : 'nsew', // => walls of the outline to display
  79.         circular: false // => if set to true, the grid will be circular, must be used when radars are drawn
  80.     },
  81.     mouse: {
  82.         track: false, // => true to track the mouse, no tracking otherwise
  83.         trackAll: false,
  84.         position: 'se', // => position of the value box (default south-east). False disables.
  85.         relative: false, // => next to the mouse cursor
  86.         trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
  87.         margin: 5, // => margin in pixels of the valuebox
  88.         lineColor: '#FF3F19', // => line color of points that are drawn when mouse comes near a value of a series
  89.         trackDecimals: 1, // => decimals for the track values
  90.         sensibility: 2, // => the lower this number, the more precise you have to aim to show a value
  91.         trackY: true, // => whether or not to track the mouse in the y axis
  92.         radius: 3, // => radius of the track point
  93.         fillColor: null, // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
  94.         fillOpacity: 0.4 // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
  95.     }
  96. };
ieBackgroundColor(チャート背景色)

だと思うんだけど、変更しても変わらない。

xaxis(X軸)
mode

‘normal’ か ‘time’。

‘time’ を設定することで、日付や時刻をX軸値に設定できる。
ただし、X軸値はタイムスタンプで設定。
それも、文字列ではなく、数値として設定。
正:[ 1427241960000, 始値, 高値, 安値, 終値 ] 誤:[ ‘1427241960000’, 始値, 高値, 安値, 終値 ]

値自動変換機能がある割には、これは変換してくれない。

noTicks

どうも横幅に対して値が少ない時に、補助の軸線を何分割で引くか
という設定みたい。
1 にすると、どんなに項目間が広くても、補助線なしになる。

tickFormatter

項目値のフォーマット。
関数でも指定できるみたい。
でも、まだ使い方がよくわからない。

  1. tickFormatter: function(x){
  2.     var x = parseInt(x);
  3.     var myDate = new Date(x*1000);
  4.     var string = myDate.getFullYear();
  5.     string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
  6.     result = string;
  7.     return string;
  8. }

stackoverflow:Putting timestamp onto x axis in Flotr2 line graph

tickDecimals

小数点以下の桁数。
0 で整数表示。

timeFormat

日付のフォーマット。

  1. %h: hours
  2. %H: hours (left-padded with a zero)
  3. %M: minutes (left-padded with a zero)
  4. %S: seconds (left-padded with a zero)
  5. %d: day of month (1-31), use %0d for zero-padding
  6. %m: month (1-12), use %0m for zero-padding
  7. %y: year (four digits)
  8. %b: month name (customizable)
  9. %p: am/pm, additionally switches %h/%H to 12 hour instead of 24
  10. %P: AM/PM (uppercase version of %p)

stackoverflow:Putting timestamp onto x axis in Flotr2 line graph

timeformat “%y/<br>%m” 日時ラベルの書式。htmlタグ使える。

k16’s note:時系列データのグラフをjQueryとFlotで描く

timeMode

‘UTC’ か ‘local’。

固有設定

4200行目辺りからローソク足グラフ専用設定。

  1. options: {
  2.     show: false, // => setting to true will show candle sticks, false will hide
  3.     lineWidth: 1, // => in pixels
  4.     wickLineWidth: 1, // => in pixels
  5.     candleWidth: 0.6, // => in units of the x axis
  6.     fill: true, // => true to fill the area from the line to the x axis, false for (transparent) no fill
  7.     upFillColor: '#00A8F0',// => up sticks fill color
  8.     downFillColor: '#CB4B4B',// => down sticks fill color
  9.     fillOpacity: 0.5, // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
  10.     barcharts: false // => draw as barcharts (not standard bars but financial barcharts)
  11. },
candles
wickLineWidth

ひげの線の太さ。

candleWidth

塗りグラフ部分の太さ。
どうもひげの線からどのくらい太くする? という設定みたい。

fillOpacity

塗りグラフの中をどの程度塗るか。
透明度のイメージ。
0(塗らない)→ 1(ベタ塗り)まで。

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-03-28 (土) 19:00:47 | 最終更新:2015-03-31 (火) 11:56:27

Flotr2

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-03-28 (土) 18:58:13 | 最終更新:2015-03-31 (火) 11:55:45

歩み値からチャート推移を再現しようとして
このプラグインに当たった。

【環境】
Flotr2:バージョン不明

別に Flot というグラフプラグインも存在するので
Flotr2 は、Flot revision 2 なのかしらね。

Flotr2
GitHub:HumbleSoftware/Flotr2

インストール

GItHub:flotr2.min.js
からコピペ。

グラフの種類

いっぱいw
ローソク足(CandleStick)

Flotr2 参照。

基本設定

GitHub:flotr2.js

1600行目辺りから基本設定。

  1. Flotr.defaultOptions = {
  2.     colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
  3.     ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
  4.     title: null, // => The graph's title
  5.     subtitle: null, // => The graph's subtitle
  6.     shadowSize: 4, // => size of the 'fake' shadow
  7.     defaultType: null, // => default series type
  8.     HtmlText: true, // => wether to draw the text using HTML or on the canvas
  9.     fontColor: '#545454', // => default font color
  10.     fontSize: 7.5, // => canvas' text font size
  11.     resolution: 1, // => resolution of the graph, to have printer-friendly graphs !
  12.     parseFloat: true, // => whether to preprocess data for floats (ie. if input is string)
  13.     preventDefault: true, // => preventDefault by default for mobile events. Turn off to enable scroll.
  14.     xaxis: {
  15.         ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  16.         minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  17.         showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
  18.         showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
  19.         labelsAngle: 0, // => labels' angle, in degrees
  20.         title: null, // => axis title
  21.         titleAngle: 0, // => axis title's angle, in degrees
  22.         noTicks: 5, // => number of ticks for automagically generated ticks
  23.         minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
  24.         tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
  25.         tickDecimals: null, // => no. of decimals, null means auto
  26.         min: null, // => min. value to show, null means set automatically
  27.         max: null, // => max. value to show, null means set automatically
  28.         autoscale: false, // => Turns autoscaling on with true
  29.         autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
  30.         color: null, // => color of the ticks
  31.         mode: 'normal', // => can be 'time' or 'normal'
  32.         timeFormat: null,
  33.         timeMode:'UTC', // => For UTC time ('local' for local time).
  34.         timeUnit:'millisecond',// => Unit for time (millisecond, second, minute, hour, day, month, year)
  35.         scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
  36.         base: Math.E,
  37.         titleAlign: 'center',
  38.         margin: true // => Turn off margins with false
  39.     },
  40.     x2axis: {},
  41.     yaxis: {
  42.         ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  43.         minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  44.         showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
  45.         showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
  46.         labelsAngle: 0, // => labels' angle, in degrees
  47.         title: null, // => axis title
  48.         titleAngle: 90, // => axis title's angle, in degrees
  49.         noTicks: 5, // => number of ticks for automagically generated ticks
  50.         minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
  51.         tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
  52.         tickDecimals: null, // => no. of decimals, null means auto
  53.         min: null, // => min. value to show, null means set automatically
  54.         max: null, // => max. value to show, null means set automatically
  55.         autoscale: false, // => Turns autoscaling on with true
  56.         autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
  57.         color: null, // => The color of the ticks
  58.         scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
  59.         base: Math.E,
  60.         titleAlign: 'center',
  61.         margin: true // => Turn off margins with false
  62.     },
  63.     y2axis: {
  64.         titleAngle: 270
  65.     },
  66.     grid: {
  67.         color: '#545454', // => primary color used for outline and labels
  68.         backgroundColor: null, // => null for transparent, else color
  69.         backgroundImage: null, // => background image. String or object with src, left and top
  70.         watermarkAlpha: 0.4, // =>
  71.         tickColor: '#DDDDDD', // => color used for the ticks
  72.         labelMargin: 3, // => margin in pixels
  73.         verticalLines: true, // => whether to show gridlines in vertical direction
  74.         minorVerticalLines: null, // => whether to show gridlines for minor ticks in vertical dir.
  75.         horizontalLines: true, // => whether to show gridlines in horizontal direction
  76.         minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
  77.         outlineWidth: 1, // => width of the grid outline/border in pixels
  78.         outline : 'nsew', // => walls of the outline to display
  79.         circular: false // => if set to true, the grid will be circular, must be used when radars are drawn
  80.     },
  81.     mouse: {
  82.         track: false, // => true to track the mouse, no tracking otherwise
  83.         trackAll: false,
  84.         position: 'se', // => position of the value box (default south-east). False disables.
  85.         relative: false, // => next to the mouse cursor
  86.         trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
  87.         margin: 5, // => margin in pixels of the valuebox
  88.         lineColor: '#FF3F19', // => line color of points that are drawn when mouse comes near a value of a series
  89.         trackDecimals: 1, // => decimals for the track values
  90.         sensibility: 2, // => the lower this number, the more precise you have to aim to show a value
  91.         trackY: true, // => whether or not to track the mouse in the y axis
  92.         radius: 3, // => radius of the track point
  93.         fillColor: null, // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
  94.         fillOpacity: 0.4 // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
  95.     }
  96. };
ieBackgroundColor(チャート背景色)

だと思うんだけど、変更しても変わらない。

xaxis(X軸)
mode

‘normal’ か ‘time’。

‘time’ を設定することで、日付や時刻をX軸値に設定できる。
ただし、X軸値はタイムスタンプで設定。
それも、文字列ではなく、数値として設定。
正:[ 1427241960000, 始値, 高値, 安値, 終値 ] 誤:[ ‘1427241960000’, 始値, 高値, 安値, 終値 ]

値自動変換機能がある割には、これは変換してくれない。

noTicks

どうも横幅に対して値が少ない時に、補助の軸線を何分割で引くか
という設定みたい。
1 にすると、どんなに項目間が広くても、補助線なしになる。

tickFormatter

項目値のフォーマット。
関数でも指定できるみたい。
でも、まだ使い方がよくわからない。

  1. tickFormatter: function(x){
  2.     var x = parseInt(x);
  3.     var myDate = new Date(x*1000);
  4.     var string = myDate.getFullYear();
  5.     string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
  6.     result = string;
  7.     return string;
  8. }

stackoverflow:Putting timestamp onto x axis in Flotr2 line graph

tickDecimals

小数点以下の桁数。
0 で整数表示。

timeFormat

日付のフォーマット。

  1. %h: hours
  2. %H: hours (left-padded with a zero)
  3. %M: minutes (left-padded with a zero)
  4. %S: seconds (left-padded with a zero)
  5. %d: day of month (1-31), use %0d for zero-padding
  6. %m: month (1-12), use %0m for zero-padding
  7. %y: year (four digits)
  8. %b: month name (customizable)
  9. %p: am/pm, additionally switches %h/%H to 12 hour instead of 24
  10. %P: AM/PM (uppercase version of %p)

stackoverflow:Putting timestamp onto x axis in Flotr2 line graph

timeformat “%y/<br>%m” 日時ラベルの書式。htmlタグ使える。

k16’s note:時系列データのグラフをjQueryとFlotで描く

timeMode

‘UTC’ か ‘local’。

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-03-28 (土) 18:58:13 | 最終更新:2015-03-31 (火) 11:55:45

Moment の isValid() が機能しない

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-03-28 (土) 18:29:11 | 最終更新:2015-03-28 (土) 18:30:02

【環境】
moment:2.9.0

Moment.js
Moment.js Documentation

現象

公式ドキュメント:Moment.js Documentation

  1. moment("2010 13",           "YYYY MM").isValid();     // false (not a real month)

こう書いてあるけど、月を3ケタにすると通っちゃう。

しかも挙動がマチマチ。

  1. // 根本的にフォーマットが違っているパターン
  2. moment( '2010 12', 'YYYY-MM' ).isValid() // true
  3. var date = moment( $( '#month' ).val() );
  4. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  5.  
  6. moment( '2010 99', 'YYYY-MM' ).isValid() // false
  7.  
  8. moment( '2010 100', 'YYYY-MM' ).isValid() // true
  9. var date = moment( $( '#month' ).val() );
  10. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  11.  
  12. moment( '2010 129', 'YYYY-MM' ).isValid() // true
  13. var date = moment( $( '#month' ).val() );
  14. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  15.  
  16. moment( '2010 130', 'YYYY-MM' ).isValid() // false
  17.  
  18. // フォーマットは正しいパターン
  19. moment( '2010-100', 'YYYY-MM' ).isValid() // true
  20. var date = moment( $( '#month' ).val() );
  21. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-04
  22. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-04-10
  23.  
  24. moment( '2010-101', 'YYYY-MM' ).isValid() // true
  25. var date = moment( $( '#month' ).val() );
  26. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-04
  27. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-04-11
  28.  
  29. moment( '2010-129', 'YYYY-MM' ).isValid() // true
  30. var date = moment( $( '#month' ).val() );
  31. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-05
  32. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-05-09
  33.  
  34. moment( '2010-130', 'YYYY-MM' ).isValid() // false

上記実験結果をまとめると

  • 2ケタ月は 13~99 について false
  • 3ケタ月は 100~129 について true、130~ false
  • フォーマットが異なっているときは、moment オブジェクトとしては認めても、Invalid Date
  • フォーマットが合っているときは、YYYY-DDD として、元日からの総合日数で年月日を算出している模様
    ただし、130日以降は NG

面白くていくつか実験してみたけど、解決策があるので、この辺で。
 

解決策

というか正しい書式。

  1. moment('It is 2012-05-25', 'YYYY-MM-DD').isValid();       // true
  2. moment('It is 2012-05-25', 'YYYY-MM-DD', true).isValid(); // false
  3. moment('2012-05-25',       'YYYY-MM-DD', true).isValid(); // true

第3引数に true を入れると「真面目に」チェックしてくれるみたい。 😎
今のところは正常にバリデーションしてくれてます。

と思ったら嘘だった

と、思ったら、次の日、鯖に上げてみたら true が機能しない。
そして、あれ?っと思ってローカルで再び試したら機能していない。
???
むぅ。。。

困った
Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-03-28 (土) 18:29:11 | 最終更新:2015-03-28 (土) 18:30:02

時間間隔での繰り返し処理

Posted by muchag | JavaScript |
初回投稿:2015-03-28 (土) 10:58:18 | 最終更新:2015-03-28 (土) 10:58:18

描画に時間が掛かるグラフを連続処理をするにあたって
待ち時間を入れることにしたんだけど
どうもうまくいかないので、Google 先生に聞いてみた。

が、時間がないので、参考サイトのみ。

参考サイト

MAYONAKA:JavaScriptでの繰り返し処理とその停止のやり方

Posted by muchag | JavaScript |
初回投稿:2015-03-28 (土) 10:58:18 | 最終更新:2015-03-28 (土) 10:58:18

即時関数

Posted by muchag | JavaScript |
初回投稿:2015-03-28 (土) 9:35:19 | 最終更新:2015-03-28 (土) 9:38:50

なんか変な記述を見つけて、びっくりして調べた。
即時関数 というそうだ。

【環境】
Firefox:36.0.4
書式
  1. // 基本形
  2. (function(){
  3.     処理
  4. })()
  5.  
  6. // 関数名はあってもなくてもよい
  7. (function hoge(){
  8.     処理
  9. })()
  10.  
  11. // 引数値の指定は、尻尾の()で行う
  12. (function( arg ){
  13.     処理
  14. })( '引数' )
  15.  
  16. // 引数指定用の()の位置は下記でもよい
  17. (function(){
  18.     処理
  19. }())
比較
  1. // 一般
  2. function hoge() {
  3.   alert( 'test' );
  4. }
  5. hoge(); // test
  6.  
  7. // 即時関数
  8. (function hoge() {
  9.   alert( 'test' );
  10. })();
意義

「グローバル変数の使用を抑える」ことができる。

JavaScript の場合、変数も関数もグローバル変数となる。

  1. var hoge;
  2.  
  3. function hoge() {}

これらは共にグローバルオブジェクトのプロパティとして定義される。

ブラウザの場合は、Window オブジェクトがグローバルオブジェクトなので

  1. window.hoge

でアクセス可能。

即時関数の場合は、その場使い捨てなので、
グローバルオブジェクトに登録されない。
=「グローバル変数の使用を抑える」

付加効能

関数定義と呼び出しを一括で行える
=スクリプトを1行削ることができる 🙄

注意事項
記述場所

読み込み時にその場で実行してしまうので
処理対象に DOM 要素を設定している場合は
DOM 出力後に記述しないと、エラーとなってしまう。

つまり、<head> で直接記述したり、外部ファイルを読み込んではダメ。
</body> 直前に記述したり、外部ファイルを読み込んでやること。

参考サイト

三等兵:知ってて当然?初級者のためのJavaScriptで使う即時関数(function(){…})()の全て

Posted by muchag | JavaScript |
初回投稿:2015-03-28 (土) 9:35:19 | 最終更新:2015-03-28 (土) 9:38:50
« 前ページへ次ページへ »