Highcharts 4.1.4

Posted by muchag | JavaScript,Library & PlugIn & AddIn | 2015-03-30 (月) 14:20:41

歩み値からチャートについて
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)
JavaScript,Library & PlugIn & AddIn | 2015-03-30 (月) 14:20:41 |

Flotr2 -> ローソク足(CandleStick)

Posted by muchag | JavaScript,Library & PlugIn & AddIn | 2015-03-28 (土) 19:00:47

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

【環境】
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(ベタ塗り)まで。

JavaScript,Library & PlugIn & AddIn | 2015-03-28 (土) 19:00:47 |

Flotr2

Posted by muchag | JavaScript,Library & PlugIn & AddIn | 2015-03-28 (土) 18:58:13

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

【環境】
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’。

JavaScript,Library & PlugIn & AddIn | 2015-03-28 (土) 18:58:13 |

Moment の isValid() が機能しない

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT | 2015-03-28 (土) 18:29:11

【環境】
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 が機能しない。
そして、あれ?っと思ってローカルで再び試したら機能していない。
???
むぅ。。。

困った
JavaScript,Library & PlugIn & AddIn,困ったTT | 2015-03-28 (土) 18:29:11 |

pjax(defunkt) -> フォームの値の受け渡し

Posted by muchag | jQuery,Library & PlugIn & AddIn,困ったTT | 2015-02-18 (水) 12:44:50

フォームの値の受け渡しについて。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
GET

GET 渡しはすんなりできた。

  1. var url = 'index.php';
  2. var data = {
  3.     name : $( 'input[name = "name"]' ).val(),
  4.     value : $( 'input[name = "value"]' ).val()
  5. };
  6. $.pjax({
  7.     url: url,
  8.     type: 'GET',
  9.     data: data,
  10.     container: '#container',
  11. });
  1. // print_r( $_GET ); 結果
  2. Array
  3. (
  4.     [name] => hoge
  5.     [value] => 1
  6. )

 

JSON

dataType を json にしても、結果は同じ。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'json',
  6.     container: '#container',
  7. });

 

JSONP

dataType を jsonp にすると、2つばかり $_GET の値が増えた。。。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'jsonp',
  6.     container: '#container',
  7. });
  1. // print_r( $_GET ); 結果
  2. Array
  3. (
  4.     [callback] => jQuery21309920695357463317_1424227516871
  5.     [name] => hoge
  6.     [value] => 1
  7.     [_] => 1424227516872
  8. )

まぁ、JSON と JSONP のお勉強は今度ということで。 🙄
 

POST
  1. var url = 'index.php';
  2. var data = {
  3.     name : $( 'input[name = "name"]' ).val(),
  4.     value : $( 'input[name = "value"]' ).val()
  5. };
  6. $.pjax({
  7.     url: url,
  8.     type: 'POST',
  9.     data: data,
  10.     container: '#container',
  11. });
  1. // print_r( $_POST ); 結果
  2. Array
  3. (
  4. )

$_POST を取得できていない。
そして通信時間が長くなった。

dataType を text にしても、結果は同じ。
 

serialize()

data を serialize() にしても結果は同じ。

  1. var url = 'index.php';
  2. $.pjax({
  3.     url: url,
  4.     type: 'POST',
  5.     data: $( 'form' ).serialize(),
  6.     container: '#container',
  7. });

 

JSON, JSONP

dataType を json にしたら、通信すら行われなくなった。
JSONP にしても、通信は行われない。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'json',
  6.     container: '#container',
  7. });

 
困った
仕方ないので、今回は GET で対応。

jQuery,Library & PlugIn & AddIn,困ったTT | 2015-02-18 (水) 12:44:50 |

jquery.pjax.js (defunkt 版)

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-02-11 (水) 15:20:23

AjaxpushState を組み合わせた技術らしい。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
概要
差し替え機能

とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
 

URL 変更機能

別ページの URL へ切り替える。
 

効能

ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
 

インストール

GitHub:defunkt/jquery-pjax から DL して配置。

falsandtru 版 と呼ばれる別バージョンもあるそうなので

jquery.pjax.defunkt.js

とリネームして配置。
 

使い方
ライブラリの読込
  1. <script src="jquery.min.js"></script>
  2. <script src="jquery.pjax.defunkt.js"></script>

 

ファイルの配置
index.html
  1. <body>
  2.     <div>pjax before.</div>
  3.  
  4.     <div id="container">
  5.         <div><button>pjax before.</button></div>
  6.     </div>
  7.  
  8.     <script type="text/javascript">
  9.     $( document ).ready( function() {
  10.  
  11.         $( 'button' ).click( function() {
  12.  
  13.             $.pjax({
  14.                 url: 'pjax_test.php';
  15.                 container: '#container',
  16.                 fragment:  '#container_new'
  17.             });
  18.         });
  19.     });
  20.     </script>
  21. </body>

 

pjax_test.html
  1. <body>
  2.     <div>pjax after.</div>
  3.  
  4.     <div id="container_new">
  5.  
  6.         <div>pjax after. Good Job!</div>
  7.  
  8.     </div>
  9. </body>

 

結果

これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
 

連続

ところが、1度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
 
そこで1枚のページで差し替えるタイプにしたら、連続して動作した。

index.php
  1. <body>
  2.     <div id="container">
  3.         <div id="test">
  4.             <button id="hoge_1">pjax</button>
  5.             <button id="hoge_2"><?php echo ( empty( $_GET&#91;'value'&#93; ) ) ? 1 : $_GET&#91;'value'&#93; + 1; ?></button>
  6.         </div>
  7.     </div>
  8.  
  9.     <script type="text/javascript">
  10.     $( document ).ready( function() {
  11.         $( 'button' ).click( function() {
  12.             $.pjax({
  13.                 url: 'index.php?value=' + $( '#hoge_2' ).text(),
  14.                 container: '#container',
  15.                 fragment:  '#container_new'
  16.             });
  17.         });
  18.     });
  19.     </script>
  20. </body>

ただし、

  1. container: '#container',
  2. fragment: '#container'

ここを同じ名前にすると1回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな~。。。
 
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯

解決?

やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。

  1. container: '#container',

これでちゃんと動く。
 

オプション、イベント

オプションイベント を見てやってみましょう。
 

開始時処理
  1.  
  2. $(document).on('pjax:send', function(e) {
  3.     $('body').append("<div id='loading'>処理中</div>");
  4. });

 

終了時処理
  1. $(document).on('pjax:complete', function(e,data) {
  2.     $("#loading").remove();
  3. });

これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に!
 

フォームの値の受け渡し

フォームの値の受け渡し 参照。
 

注意

ブラウザバックとかの挙動への対処が必要ね~。
 

参考サイト

RakSul:はじめての「pjax」
Qiita:pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix:defunkt版pjaxの説明

jQuery,Library & PlugIn & AddIn | 2015-02-11 (水) 15:20:23 |

Crayon Syntax Highlighter

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2015-02-10 (火) 12:32:38

長年愛用してきた iG:Syntax Hiliter とおさらばする日がやってきた。寂しい><

Crayon 導入中止

せっかく記事を書いたけど、Crayon の導入を中止した。

な~ぜか!
as, vb のショートタグに無反応 😯

さよなら Crayon 短い付き合いだったね。。。

ここまで

 

【環境】
WordPress:4.1
Crayon Syntax Highlighter:2.6.9
iG:Syntax Hiliter:4.3
お別れの理由

iG:Syntax Hiliter では、知らないうちに、php や javascript など、お作法のある言語では、
その記述が必須になっていた。
 
このように記述しなければならず

  1. <?php
  2. echo 'Hello World!';
  3. ?>

これでは、ハイライトされない。

  1. echo 'Hello World!';

 
これはこれで大切なことなのかもしれないけれど、JavaScript のときは、特に鬱陶しくなってしまう。

  1. jQuery()
  2.  
  3. $()
  1. <script type="text/javascript">
  2. jQuery()
  3.  
  4. $()
  5. </script>

 
ね!

jQuery の書式 こちらの記事を書いていて、どうにも我慢できなくなり、
iG:Syntax Hiliter とお別れする決心をしました。
 

選んだ理由
選択肢

そもそも選択肢が少ないね~。
前に iG:Syntax Hiliter を導入したとき も選択肢が少なかったけど
今でもあまりないみたい。
需要は高そうなのにね~。
 

決め手

乗り換えるにあたって、最大の決め手はもちろん!
今までの記事を書き直さなくて良いこと。
 
その点、Crayon Syntax Highlighter は、iG:Syntax Hiliter で利用していたショートタグ
[php]hogehoge[/php]
を解釈してくれるので、いいね! 🙂

言語混在

後、嬉しい機能として言語の混在でもOK。
 

必要とする仕様・機能

その他、私が必要とする機能が一通り揃っていたのでOK。

  • 仕様
    • 1行毎に背景色を変える
    • 行番号を表示できる
    • QuickTag から使える(入力が楽)
  • 機能
    • 強調行を設定できる
    • 開始行番号を設定できる

 

設定

下記は私が変更した設定。
 

一般設定
テーマ

リストからお好みのを探して [Duplicate] とすると、
テーマがコピーされ編集できる状態になるので [Edit]
 
すると編集画面が起動するので、画面右側でカスタマイズ。
 

ツールバー

[ツールバーの表示]-[常に表示]
[ソース言語を表示]-[常に表示]
 

コード

常にスクロールバーを表示する
チェックを入れる。
 

タグ

Crayonsとして[php][/php]のようなミニタグをキャプチャします。
チェックを入れる。

これで、古い記事のショートタグを認識してくれる。
 
但し、[php num=”3″ highlint=”5″] のように属性つきのものは、このままだと無効になってしまうので
Crayon Syntax Highlighter に拾ってもらえる文言に変更。

  1. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " num=", " start-line=");
  2. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " firstline=", " start-line=");
  3. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " highlight=", " mark=");

これで無事に Crayon に拾ってもらえた。

また、逆に [php] という文字列を表示したいときは、$[php] のように前に $ を付けてやることで、
Crayon をエスケープできる。
 

その他

アニメーションを無効にする
プログラム実行時の統計を無効にする
重くなりそうなので、チェックをつけた。
 

デバッグ
エラー

個々設置(Crayon)のエラーを記録
システム全体のエラーを記録
カスタムエラーメッセージを表示する
重くなりそうなので、ひとまず全てのチェックを外した。

Library & PlugIn & AddIn,WordPress | 2015-02-10 (火) 12:32:38 |

Numeral.js (数値フォーマット)

Posted by muchag | JavaScript,Library & PlugIn & AddIn | 2015-02-08 (日) 22:26:14

数値フォーマットライブラリ。

Qiita:JavaScriptでカンマ区切りなどによる数値のフォーマットができるNumeral.jsが便利
こちらで紹介されていた。
 
Numeral.js

JavaScript,Library & PlugIn & AddIn | 2015-02-08 (日) 22:26:14 |

jquery.shapeshift.js (要素を DnD で並べ替える)

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 19:18:53

前回の jquery.tile.js (タイル状に配置)で並べたタイル状要素を DnD で自由に並べ替えられるプラグイン。
jquery.shapeshift.js

またもや、下記サイトにお導きをいただきました。
啓文社:[jQuery] タイルをドラッグ&ドロップで並べ替え

【環境】
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
JS

GitHub:jquery.shapeshift
ここから DL して、入手。

すごい数のオプションw

  1. <script type="text/javascript">
  2. defaults = {
  3.     selector: "*",
  4.     enableDrag: true,
  5.     enableCrossDrop: true,
  6.     enableResize: true,
  7.     enableTrash: false,
  8.     align: "center",
  9.     colWidth: null,
  10.     columns: null,
  11.     minColumns: 1,
  12.     autoHeight: true,
  13.     maxHeight: null,
  14.     minHeight: 100,
  15.     gutterX: 10,
  16.     gutterY: 10,
  17.     paddingX: 10,
  18.     paddingY: 10,
  19.     animated: true,
  20.     animateOnInit: false,
  21.     animationSpeed: 225,
  22.     animationThreshold: 100,
  23.     dragClone: false,
  24.     deleteClone: true,
  25.     dragRate: 100,
  26.     dragWhitelist: "*",
  27.     crossDropWhitelist: "*",
  28.     cutoffStart: null,
  29.     cutoffEnd: null,
  30.     handle: false,
  31.     cloneClass: "ss-cloned-child",
  32.     activeClass: "ss-active-child",
  33.     draggedClass: "ss-dragged-child",
  34.     placeholderClass: "ss-placeholder-child",
  35.     originalContainerClass: "ss-original-container",
  36.     currentContainerClass: "ss-current-container",
  37.     previousContainerClass: "ss-previous-container"
  38. };
  39. </script>

 

HTML
JavaScript 部分

上記オプションの必要部分を、下記で上書きする。

  1. <script type="text/javascript">
  2. $(".container").shapeshift({
  3.     minColumns: 3
  4. });
  5. </script>

 

フック

参考サイト には、下記のような記述があった。
こうすることで、フックを作れるのね~。

  1. <script type="text/javascript">
  2. $(".container").on('ss-drop-complete', function(e){
  3.     $('.tile').tile(4);
  4. });
  5. </script>

 

要素部分
  1. <div class="container">
  2.     <div class="tile">要素</div>
  3.     <div class="tile">要素</div>
  4.     <div data-ss-colspan='2'>要素</div>
  5.     <div class="tile">要素</div>
  6. </div>

 

CSS
  1. .container {
  2.     border: 1px dashed #ccc;
  3.     position: relative;
  4. }
  5.  
  6. .container > div {
  7.     background: #CCC;
  8.     height: 100px;
  9.     position: absolute;
  10.     width: 80px;
  11. }
  12.  
  13. .container > div[data-ss-colspan='2'] { width: 170px; }
  14.  
  15. .container .ss-placeholder-child {
  16.     background: transparent;
  17.     border: 1px dashed red;
  18. }

 

タイルが全て重なってしまう現象

2度起きた。
 
1度目の原因と解決法は忘れてしまった。。。残念。
 

原因

JavaScript のシンタックスエラーだった。
Firefox の開発ツールを起動し忘れていた。 😯

  1. $('[id = "hoge"') // 誤
  2.  
  3. $('[id = "hoge"]') // 誤

閉じカッコ(])が抜けていた。
 
タイル要素内のテキストボックスの値チェックを入れたときに起きた。

jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 19:18:53 |

jquery.tile.js (タイル状に配置)

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 17:12:49

jquery.tile.js
要素をタイル状に並べてくれるプラグイン。

説明サイト
URIN HACK:要素の高さを揃える超軽量なjQueryプラグイン jquery.tile.js

【環境】
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
JS

jquery.tile.js
こちらからソースをコピペして

jquery.tile.js

を作成して配置。
 

HTML
JavaScript 部分
  1. <script src="jquery.tile.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4.   $('.tile').tile();
  5. });
  6. </script>

4行目、titl メソッドの引数に数値を入れると、列数を指定できる。

というわけではなく、x列毎に同じ高さに揃える という指定らしく

  1. $('.tile').tile(4);

このように設定して、表示エリアを5列分取ったら、高さがずれたw

つまり、列数を指定するときは、表示幅もそれに合わせて指定する必要がある
 

要素部分
  1. <div class="tile">1</div>
  2. <div class="tile">2</div>
  3. <div class="tile">3</div>
  4. <div class="tile">4</div>
  5. <div class="tile">5</div>

綺麗に並んだ~♪
 

CSS

お好みに応じて設定。

  1. .tile {
  2.     border:1px solid #999;
  3.     background:#f0f0f0;
  4.     float:left;
  5.     width:130px;
  6.     margin:0 10px 10px 0;
  7. }

啓文社:[jQuery] タイル表示
CSS は、こちらのサイトの例をいただいてきた。
こちらのサイトのおかげで、このプラグインに出会うことができました~

jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 17:12:49 |
« 前ページへ次ページへ »