Flotr2 -> ローソク足（CandleStick）
歩み値からチャート推移を再現しようとして
このプラグインに当たった。
【環境】
Flotr2:バージョン不明
Flotr2:バージョン不明
導入
Flotr2：Basic Candle
ここからサンプルソースをコピペ。
書式
- Flotr.draw(
- target,
- [data],
- [options],
- )
target（描画対象）
チャートを描画するエレメントを指定。
- var target = document.getElementById( "chart_candlestick" );
- var target = $( "#chart_candlestick" ); // jQuery 形式だとうまくいかない
jQuery 形式だとうまくいかない。
なぜかしらね～。
data（データ）
書式
- var data = [
- [ X軸値, 始値, 高値, 安値, 終値 ],
- [ X軸値, 始値, 高値, 安値, 終値 ],
- ・・・
- ];
options（設定）
GitHub：flotr2.js
基本設定
1600行目辺りから基本設定。
- Flotr.defaultOptions = {
- colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
- ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
- title: null, // => The graph's title
- subtitle: null, // => The graph's subtitle
- shadowSize: 4, // => size of the 'fake' shadow
- defaultType: null, // => default series type
- HtmlText: true, // => wether to draw the text using HTML or on the canvas
- fontColor: '#545454', // => default font color
- fontSize: 7.5, // => canvas' text font size
- resolution: 1, // => resolution of the graph, to have printer-friendly graphs !
- parseFloat: true, // => whether to preprocess data for floats (ie. if input is string)
- preventDefault: true, // => preventDefault by default for mobile events. Turn off to enable scroll.
- xaxis: {
- ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
- minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
- showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
- showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
- labelsAngle: 0, // => labels' angle, in degrees
- title: null, // => axis title
- titleAngle: 0, // => axis title's angle, in degrees
- noTicks: 5, // => number of ticks for automagically generated ticks
- minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
- tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
- tickDecimals: null, // => no. of decimals, null means auto
- min: null, // => min. value to show, null means set automatically
- max: null, // => max. value to show, null means set automatically
- autoscale: false, // => Turns autoscaling on with true
- autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
- color: null, // => color of the ticks
- mode: 'normal', // => can be 'time' or 'normal'
- timeFormat: null,
- timeMode:'UTC', // => For UTC time ('local' for local time).
- timeUnit:'millisecond',// => Unit for time (millisecond, second, minute, hour, day, month, year)
- scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
- base: Math.E,
- titleAlign: 'center',
- margin: true // => Turn off margins with false
- },
- x2axis: {},
- yaxis: {
- ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
- minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
- showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
- showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
- labelsAngle: 0, // => labels' angle, in degrees
- title: null, // => axis title
- titleAngle: 90, // => axis title's angle, in degrees
- noTicks: 5, // => number of ticks for automagically generated ticks
- minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
- tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
- tickDecimals: null, // => no. of decimals, null means auto
- min: null, // => min. value to show, null means set automatically
- max: null, // => max. value to show, null means set automatically
- autoscale: false, // => Turns autoscaling on with true
- autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
- color: null, // => The color of the ticks
- scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
- base: Math.E,
- titleAlign: 'center',
- margin: true // => Turn off margins with false
- },
- y2axis: {
- titleAngle: 270
- },
- grid: {
- color: '#545454', // => primary color used for outline and labels
- backgroundColor: null, // => null for transparent, else color
- backgroundImage: null, // => background image. String or object with src, left and top
- watermarkAlpha: 0.4, // =>
- tickColor: '#DDDDDD', // => color used for the ticks
- labelMargin: 3, // => margin in pixels
- verticalLines: true, // => whether to show gridlines in vertical direction
- minorVerticalLines: null, // => whether to show gridlines for minor ticks in vertical dir.
- horizontalLines: true, // => whether to show gridlines in horizontal direction
- minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
- outlineWidth: 1, // => width of the grid outline/border in pixels
- outline : 'nsew', // => walls of the outline to display
- circular: false // => if set to true, the grid will be circular, must be used when radars are drawn
- },
- mouse: {
- track: false, // => true to track the mouse, no tracking otherwise
- trackAll: false,
- position: 'se', // => position of the value box (default south-east). False disables.
- relative: false, // => next to the mouse cursor
- trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
- margin: 5, // => margin in pixels of the valuebox
- lineColor: '#FF3F19', // => line color of points that are drawn when mouse comes near a value of a series
- trackDecimals: 1, // => decimals for the track values
- sensibility: 2, // => the lower this number, the more precise you have to aim to show a value
- trackY: true, // => whether or not to track the mouse in the y axis
- radius: 3, // => radius of the track point
- fillColor: null, // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
- fillOpacity: 0.4 // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
- }
- };
ieBackgroundColor（チャート背景色）
だと思うんだけど、変更しても変わらない。
xaxis（X軸）
mode
‘normal’ か ‘time’。
‘time’ を設定することで、日付や時刻をX軸値に設定できる。
ただし、X軸値はタイムスタンプで設定。
それも、文字列ではなく、数値として設定。
正：[ 1427241960000, 始値, 高値, 安値, 終値 ]
誤：[ ‘1427241960000’, 始値, 高値, 安値, 終値 ]
値自動変換機能がある割には、これは変換してくれない。
noTicks
どうも横幅に対して値が少ない時に、補助の軸線を何分割で引くか
という設定みたい。
1 にすると、どんなに項目間が広くても、補助線なしになる。
tickFormatter
項目値のフォーマット。
関数でも指定できるみたい。
でも、まだ使い方がよくわからない。
- tickFormatter: function(x){
- var x = parseInt(x);
- var myDate = new Date(x*1000);
- var string = myDate.getFullYear();
- string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
- result = string;
- return string;
- }
stackoverflow：Putting timestamp onto x axis in Flotr2 line graph
tickDecimals
小数点以下の桁数。
0 で整数表示。
timeFormat
日付のフォーマット。
- %h: hours
- %H: hours (left-padded with a zero)
- %M: minutes (left-padded with a zero)
- %S: seconds (left-padded with a zero)
- %d: day of month (1-31), use %0d for zero-padding
- %m: month (1-12), use %0m for zero-padding
- %y: year (four digits)
- %b: month name (customizable)
- %p: am/pm, additionally switches %h/%H to 12 hour instead of 24
- %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行目辺りからローソク足グラフ専用設定。
- options: {
- show: false, // => setting to true will show candle sticks, false will hide
- lineWidth: 1, // => in pixels
- wickLineWidth: 1, // => in pixels
- candleWidth: 0.6, // => in units of the x axis
- fill: true, // => true to fill the area from the line to the x axis, false for (transparent) no fill
- upFillColor: '#00A8F0',// => up sticks fill color
- downFillColor: '#CB4B4B',// => down sticks fill color
- fillOpacity: 0.5, // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
- barcharts: false // => draw as barcharts (not standard bars but financial barcharts)
- },
candles
wickLineWidth
ひげの線の太さ。
candleWidth
塗りグラフ部分の太さ。
どうもひげの線からどのくらい太くする？ という設定みたい。
fillOpacity
塗りグラフの中をどの程度塗るか。
透明度のイメージ。
0（塗らない）→ 1（ベタ塗り）まで。
