playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Added config to colorize candlesticks; 

Fixed paths in the candlesticks sample html
pull/1701/head
Roman Charugin 9 years ago
parent
c76ed67834
commit
c0cb83c3a3
5 changed files with 21 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      c3.js
  2. 4
      c3.min.js
  3. 9
      htdocs/samples/chart_candlestick.html
  4. 3
      src/config.js
  5. 4
      src/shape.candlestick.js

7
c3.js
Unescape View File

@ -1256,6 +1256,9 @@
candlestick_data_max: 'max', candlestick_data_max: 'max',
candlestick_data_start: 'start', candlestick_data_start: 'start',
candlestick_data_end: 'end', candlestick_data_end: 'end',
candlestick_color_inc: 'green',
candlestick_color_dec: 'red',
candlestick_color_neutral: 'gray',
// area // area
area_zerobased: true, area_zerobased: true,
area_above: false, area_above: false,
@ -3513,6 +3516,7 @@
// Updating one candle stick // Updating one candle stick
c3_chart_internal_fn.updateCandleStick = function (durationForExit) { c3_chart_internal_fn.updateCandleStick = function (durationForExit) {
var $$ = this, var $$ = this,
config = $$.config,
candleStickData = $$.candleStickData.bind($$), candleStickData = $$.candleStickData.bind($$),
classCandleStick = $$.classCandleStick.bind($$), classCandleStick = $$.classCandleStick.bind($$),
classCandleStickShadowUpper = $$.classCandleStickShadowUpper.bind($$), classCandleStickShadowUpper = $$.classCandleStickShadowUpper.bind($$),
@ -3524,7 +3528,8 @@
$$.mainCandleStick.enter().append('path') $$.mainCandleStick.enter().append('path')
.attr('class', classCandleStick) .attr('class', classCandleStick)
.style('fill', function(d) { .style('fill', function(d) {
return !!d.csValue && d.csValue.start < d.csValue.end ? 'green' : !!d.csValue && d.csValue.start > d.csValue.end ? 'red' : 'gray'; return !!d.csValue && d.csValue.start < d.csValue.end ? config.candlestick_color_inc :
!!d.csValue && d.csValue.start > d.csValue.end ? config.candlestick_color_dec : config.candlestick_color_neutral;
}); });
$$.mainCandleStick.exit().transition().duration(durationForExit) $$.mainCandleStick.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
htdocs/samples/chart_candlestick.html
Unescape View File

@ -1,12 +1,12 @@
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="c3.css"> <link rel="stylesheet" type="text/css" href="/css/c3.css">
</head> </head>
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({
bindto: '#chart', bindto: '#chart',
@ -28,6 +28,11 @@
max: 'max', max: 'max',
start: 'start', start: 'start',
end: 'end' end: 'end'
},
color: {
inc: 'yellow',
dec: 'orange',
neutral: 'green'
} }
}, },
axis: { axis: {

3
src/config.js
Unescape View File

@ -175,6 +175,9 @@ c3_chart_internal_fn.getDefaultConfig = function () {
candlestick_data_max: 'max', candlestick_data_max: 'max',
candlestick_data_start: 'start', candlestick_data_start: 'start',
candlestick_data_end: 'end', candlestick_data_end: 'end',
candlestick_color_inc: 'green',
candlestick_color_dec: 'red',
candlestick_color_neutral: 'gray',
// area // area
area_zerobased: true, area_zerobased: true,
area_above: false, area_above: false,

4
src/shape.candlestick.js
Unescape View File

@ -94,6 +94,7 @@ c3_chart_internal_fn.updateTargetsForCandleStick = function (targets) {
// Updating one candle stick // Updating one candle stick
c3_chart_internal_fn.updateCandleStick = function (durationForExit) { c3_chart_internal_fn.updateCandleStick = function (durationForExit) {
var $$ = this, var $$ = this,
config = $$.config,
candleStickData = $$.candleStickData.bind($$), candleStickData = $$.candleStickData.bind($$),
classCandleStick = $$.classCandleStick.bind($$), classCandleStick = $$.classCandleStick.bind($$),
classCandleStickShadowUpper = $$.classCandleStickShadowUpper.bind($$), classCandleStickShadowUpper = $$.classCandleStickShadowUpper.bind($$),
@ -105,7 +106,8 @@ c3_chart_internal_fn.updateCandleStick = function (durationForExit) {
$$.mainCandleStick.enter().append('path') $$.mainCandleStick.enter().append('path')
.attr('class', classCandleStick) .attr('class', classCandleStick)
.style('fill', function(d) { .style('fill', function(d) {
return !!d.csValue && d.csValue.start < d.csValue.end ? 'green' : !!d.csValue && d.csValue.start > d.csValue.end ? 'red' : 'gray'; return !!d.csValue && d.csValue.start < d.csValue.end ? config.candlestick_color_inc :
!!d.csValue && d.csValue.start > d.csValue.end ? config.candlestick_color_dec : config.candlestick_color_neutral;
}); });
$$.mainCandleStick.exit().transition().duration(durationForExit) $$.mainCandleStick.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)

Write Preview
Loading…
Cancel
Save