mirror of https://github.com/masayuki0812/c3.git
Quite good looking graph derived from d3.js
http://c3js.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
820 B
36 lines
820 B
7 years ago
|
var chart = c3.generate({
|
||
|
|
data: {
|
||
|
|
columns: [
|
||
|
|
['data1', 100],
|
||
|
|
['data2', 300],
|
||
|
|
['data3', 200]
|
||
|
|
],
|
||
|
|
type: 'pie'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function toggle(id) {
|
||
|
|
chart.toggle(id);
|
||
|
|
}
|
||
|
|
|
||
|
|
d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
|
||
|
|
.data(['data1', 'data2', 'data3'])
|
||
|
|
.enter().append('span')
|
||
|
|
.attr('data-id', function (id) { return id; })
|
||
|
|
.html(function (id) { return id; })
|
||
|
|
.each(function (id) {
|
||
|
|
d3.select(this).style('background-color', chart.color(id));
|
||
|
|
})
|
||
|
|
.on('mouseover', function (id) {
|
||
|
|
chart.focus(id);
|
||
|
|
})
|
||
|
|
.on('mouseout', function (id) {
|
||
|
|
chart.revert();
|
||
|
|
})
|
||
|
|
.on('click', function (id) {
|
||
|
|
chart.toggle(id);
|
||
|
|
});
|