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

1件のコメント »

  1. コメント by 76Gerardo — 2017/8/3 木曜日 @ 0:55:11

    Hello admin, i must say you have very interesting articles here.
    Your blog should go viral. You need initial
    traffic boost only. How to get it? Search for: Mertiso’s tips go viral

RSS feed for comments on this post. TrackBack URI

Leave a comment