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

Fix #1506 Grid not aligned with ticks

pull/1855/head
Damien SOREL 8 years ago
parent
223404a792
commit
0540f882b4
4 changed files with 95 additions and 15 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. 24
      htdocs/index.html
  2. 69
      htdocs/samples/data_large_timeseries.html
  3. 3
      src/config.js
  4. 14
      src/grid.js

24
htdocs/index.html
Unescape View File

@ -233,15 +233,21 @@
Show label on data with format Show label on data with format
</a> </a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Data Region</h3> <h3>Data Region</h3>
<a href="./samples/data_region.html"> <a href="./samples/data_region.html">
Set region of data Set region of data
</a> </a>
<a href="./samples/data_region_timeseries.html"> <a href="./samples/data_region_timeseries.html">
Set region of timeseries data Set region of timeseries data
</a> </a>
</div> </div>
<div class="col-md-4">
<h3>Large dataset</h3>
<a href="./samples/data_large_timeseries.html">
Large timeseries data
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

69
htdocs/samples/data_large_timeseries.html
Unescape View File

@ -0,0 +1,69 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdn.rawgit.com/josephg/noisejs/master/perlin.js"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
json: generate(),
keys: {
x: 'date',
value: ['value']
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m',
count: 24,
culling: false
}
}
},
subchart: {
show: true
},
zoom: {
enabled: true
},
grid: {
x: {
show: true,
ticks: 'auto'
},
y: {
show: true
}
}
});
function generate() {
noise.seed(Math.random());
var data = [];
var date = moment('2015-01-01');
var now = moment('2017-01-01');
while (date.isBefore(now)) {
data.push({
date: date.format('YYYY-MM-DD'),
value: Math.round(noise.perlin2(date.unix() / 1000000, date.unix() / 1000000) * 100)
});
date.add(1, 'day');
}
return data;
}
</script>
</body>
</html>

3
src/config.js
Unescape View File

@ -121,7 +121,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_y_label: {}, axis_y_label: {},
axis_y_tick_format: undefined, axis_y_tick_format: undefined,
axis_y_tick_outer: true, axis_y_tick_outer: true,
axis_y_tick_values: null, axis_y_tick_values: null,
axis_y_tick_rotate: 0, axis_y_tick_rotate: 0,
axis_y_tick_count: undefined, axis_y_tick_count: undefined,
axis_y_tick_time_value: undefined, axis_y_tick_time_value: undefined,
@ -144,6 +144,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
// grid // grid
grid_x_show: false, grid_x_show: false,
grid_x_type: 'tick', grid_x_type: 'tick',
grid_x_ticks: 10,
grid_x_lines: [], grid_x_lines: [],
grid_y_show: false, grid_y_show: false,
// not used // not used

14
src/grid.js
Unescape View File

@ -29,7 +29,7 @@ c3_chart_internal_fn.initGridLines = function () {
}; };
c3_chart_internal_fn.updateXGrid = function (withoutUpdate) { c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
var $$ = this, config = $$.config, d3 = $$.d3, var $$ = this, config = $$.config, d3 = $$.d3,
xgridData = $$.generateGridData(config.grid_x_type, $$.x), xgridData = $$.generateGridData(config.grid_x_type, $$.x, config.grid_x_ticks),
tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0; tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0;
$$.xgridAttr = config.axis_rotated ? { $$.xgridAttr = config.axis_rotated ? {
@ -193,10 +193,9 @@ c3_chart_internal_fn.updateXgridFocus = function () {
.attr("y1", config.axis_rotated ? -10 : 0) .attr("y1", config.axis_rotated ? -10 : 0)
.attr("y2", config.axis_rotated ? -10 : $$.height); .attr("y2", config.axis_rotated ? -10 : $$.height);
}; };
c3_chart_internal_fn.generateGridData = function (type, scale) { c3_chart_internal_fn.generateGridData = function (type, scale, ticks) {
var $$ = this, var $$ = this,
gridData = [], xDomain, firstYear, lastYear, i, gridData = [], xDomain, firstYear, lastYear, i, tickNum;
tickNum = $$.main.select("." + CLASS.axisX).selectAll('.tick').size();
if (type === 'year') { if (type === 'year') {
xDomain = $$.getXDomain(); xDomain = $$.getXDomain();
firstYear = xDomain[0].getFullYear(); firstYear = xDomain[0].getFullYear();
@ -204,8 +203,13 @@ c3_chart_internal_fn.generateGridData = function (type, scale) {
for (i = firstYear; i <= lastYear; i++) { for (i = firstYear; i <= lastYear; i++) {
gridData.push(new Date(i + '-01-01 00:00:00')); gridData.push(new Date(i + '-01-01 00:00:00'));
} }
} else if (ticks === 'auto') {
gridData = $$.main.select("." + CLASS.axisX).selectAll('.tick').data();
} else if (Array.isArray(ticks)) {
gridData = ticks;
} else { } else {
gridData = scale.ticks(10); tickNum = $$.main.select("." + CLASS.axisX).selectAll('.tick').size();
gridData = scale.ticks(ticks || 10);
if (gridData.length > tickNum) { // use only int if (gridData.length > tickNum) { // use only int
gridData = gridData.filter(function (d) { return ("" + d).indexOf('.') < 0; }); gridData = gridData.filter(function (d) { return ("" + d).indexOf('.') < 0; });
} }

Write Preview
Loading…
Cancel
Save