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

Can now change legend position

pull/763/head
CallumVass 10 years ago
parent
e2911205ee
commit
7b5f1a04fd
7 changed files with 7323 additions and 538 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. 8
      .gitignore
  2. 812
      c3.js
  3. 2
      c3.min.js
  4. 6755
      htdocs/js/c3.js
  5. 6
      htdocs/js/c3.min.js
  6. 272
      htdocs/samples/api_legend.html
  7. 6
      src/api.legend.js

8
.gitignore vendored
Unescape View File

@ -5,3 +5,11 @@ d3.js
d3.min.js d3.min.js
components components
build build
.idea/.name
.idea/c3.iml
.idea/encodings.xml
.idea/misc.xml
.idea/modules.xml
.idea/scopes/scope_settings.xml
.idea/vcs.xml
.idea/workspace.xml

812
c3.js
View File

File diff suppressed because it is too large Load Diff

2
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

6755
htdocs/js/c3.js
View File

File diff suppressed because it is too large Load Diff

6
htdocs/js/c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

272
htdocs/samples/api_legend.html
Unescape View File

@ -1,136 +1,144 @@
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="/css/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.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="../js/c3.js"></script>
<script> <script>
var columns = []; var columns = [];
for (var i = 0; i < 5; i++ ) { for (var i = 0; i < 5; i++ ) {
columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i]; columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i];
}
var chart = c3.generate({
data: {
columns: columns,
},
axis: {
x: {
type: 'category'
} }
}
var chart = c3.generate({ });
data: {
columns: columns, setTimeout(function () {
}, chart.legend.hide();
axis: { }, 1000);
x: {
type: 'category' setTimeout(function () {
} chart = c3.generate({
data: {
columns: columns,
},
axis: {
x: {
type: 'category'
} }
}); },
legend: {
setTimeout(function () { position: 'right'
chart.legend.hide(); }
}, 1000); });
}, 2000);
setTimeout(function () {
chart = c3.generate({ setTimeout(function () {
data: { chart.legend.hide();
columns: columns, }, 3000);
},
axis: { setTimeout(function () {
x: { chart = c3.generate({
type: 'category' data: {
} columns: columns,
}, },
legend: { axis: {
position: 'right' rotated: true
} }
}); });
}, 2000); }, 4000);
setTimeout(function () { setTimeout(function () {
chart.legend.hide(); chart.legend.hide();
}, 3000); }, 5000);
setTimeout(function () { setTimeout(function () {
chart = c3.generate({ chart = c3.generate({
data: { data: {
columns: columns, columns: columns,
}, },
axis: { legend: {
rotated: true position: 'right'
} },
}); axis: {
}, 4000); rotated: true
}
setTimeout(function () { });
chart.legend.hide(); }, 6000);
}, 5000);
setTimeout(function () {
setTimeout(function () { chart.legend.hide();
chart = c3.generate({ }, 7000);
data: {
columns: columns, setTimeout(function () {
}, chart = c3.generate({
legend: { data: {
position: 'right' columns: columns,
}, },
axis: { legend: {
rotated: true show: false
} }
}); });
}, 6000); }, 8000);
setTimeout(function () { setTimeout(function () {
chart.legend.hide(); chart.legend.show();
}, 7000); }, 9000);
setTimeout(function () { setTimeout(function () {
chart = c3.generate({ chart = c3.generate({
data: { data: {
columns: columns, columns: columns,
}, },
legend: { legend: {
show: false show: false
} },
}); axis: {
}, 8000); rotated: true
}
setTimeout(function () { });
chart.legend.show(); }, 10000);
}, 9000);
setTimeout(function () {
setTimeout(function () { chart.legend.show();
chart = c3.generate({ }, 11000);
data: {
columns: columns, setTimeout(function () {
}, chart = c3.generate({
legend: { data: {
show: false columns: columns,
}, },
axis: { legend: {
rotated: true position: 'right',
} show: false
}); }
}, 10000); });
}, 12000);
setTimeout(function () {
chart.legend.show(); setTimeout(function () {
}, 11000); chart.legend.show();
}, 13000);
setTimeout(function () {
chart = c3.generate({ setTimeout(function () {
data: { chart.legend.position('bottom');
columns: columns, }, 14000);
},
legend: { setTimeout(function () {
position: 'right', chart.legend.position('right');
show: false }, 15000);
}
}); </script>
}, 12000); </body>
setTimeout(function () {
chart.legend.show();
}, 13000);
</script>
</body>
</html> </html>

6
src/api.legend.js
Unescape View File

@ -9,3 +9,9 @@ c3_chart_fn.legend.hide = function (targetIds) {
$$.hideLegend($$.mapToTargetIds(targetIds)); $$.hideLegend($$.mapToTargetIds(targetIds));
$$.updateAndRedraw({withLegend: true}); $$.updateAndRedraw({withLegend: true});
}; };
c3_chart_fn.legend.position = function (position) {
var $$ = this.internal;
$$.config.legend_position = position;
$$.isLegendRight = $$.config.legend_position === 'right';
$$.updateAndRedraw({withLegend: true});
};

Write Preview
Loading…
Cancel
Save