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

Add-on -> Free Memory

Posted by muchag | Firefox |
初回投稿:2015-03-28 (土) 10:04:14 | 最終更新:2016-05-15 (日) 16:14:43

Firefoxメモリ管理。

インストール

Firefox Add-ons:Free Memory

参考サイト

LIFE GOES TO A PARTY:【Firefox】拡張機能「Free Memory」でFirefoxのメモリ使用量を削減。これで、メモリー不足の強制終了も解決!?

Posted by muchag | Firefox |
初回投稿:2015-03-28 (土) 10:04:14 | 最終更新:2016-05-15 (日) 16:14:43

即時関数

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

最初の要素と最後の要素判別

Posted by muchag | PHP |
初回投稿:2015-03-26 (木) 16:47:38 | 最終更新:2015-03-26 (木) 16:47:38

foreach で、最初と最後の処理に面倒なことをしていた。
参考サイトを見つけて狂喜!

【環境】
PHP:5.4.7
最初
  1. reset( $array )
最後
  1. end( $array )
  1. foreach ( $array as $val ) {
  2.     if ( $val === reset( $array ) ) echo 'first';
  3.     elseif ( $val === end( $array ) ) echo 'last';
  4.     else echo 'general';
  5. }
参考サイト

FOOTMARK:PHPのforeachで最初と最後を取得する方法

Posted by muchag | PHP |
初回投稿:2015-03-26 (木) 16:47:38 | 最終更新:2015-03-26 (木) 16:47:38

テーブル結合

Posted by muchag | DataBase |
初回投稿:2015-03-26 (木) 11:27:38 | 最終更新:2015-03-26 (木) 11:41:54

MySQL:13.2.9.2 JOIN Syntax

種類
内部結合

積集合。
2つ以上のテーブルに共通で存在する場合のみ抽出する。

再帰集合

自分自身と結合することができる。
用途不明。

外部結合

和集合。
ただし、どちらかを優先するものなので、本当に全体を取得する方法はない?
LEFT JOIN:左のテーブルを全て取得し、右のテーブルは、左のテーブルにあるもののみ。
RIGHT JOIN:右のテーブルを全て取得し、左のテーブルは、右のテーブルにあるもののみ。

参考サイト

DBOnline
内部結合
外部結合
SAK 図書館:MySQL 編9 – 表結合(join)、単純結合、等価結合、外部結合、再帰結合

Posted by muchag | DataBase |
初回投稿:2015-03-26 (木) 11:27:38 | 最終更新:2015-03-26 (木) 11:41:54
次ページへ »