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

Merge branch 'dashofcode-development'

pull/340/head
Masayuki Tanaka 10 years ago
parent
8a9b8a299a 86b4131cb2
commit
34bf061c13
4 changed files with 87 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      c3.css
  2. 65
      c3.js
  3. 6
      c3.min.js
  4. 30
      htdocs/samples/legend.html

7
c3.css
Unescape View File

@ -132,6 +132,13 @@
font-size: 12px;
}
.c3-legend-background {
opacity: 0.75;
fill: white;
stroke: lightgray;
stroke-width: 1
}
/*-- Tooltip --*/
.c3-tooltip {

65
c3.js
Unescape View File

@ -69,6 +69,7 @@
axisYLabel: 'c3-axis-y-label',
axisY2: 'c3-axis-y2',
axisY2Label: 'c3-axis-y2-label',
legendBackground: 'c3-legend-background',
legendItem: 'c3-legend-item',
legendItemEvent: 'c3-legend-item-event',
legendItemTile: 'c3-legend-item-tile',
@ -182,6 +183,10 @@
// legend
var __legend_show = getConfig(['legend', 'show'], true),
__legend_position = getConfig(['legend', 'position'], 'bottom'),
__legend_inset_anchor = getConfig(['legend', 'inset', 'anchor'], 'top-left'),
__legend_inset_x = getConfig(['legend', 'inset', 'x'], 10),
__legend_inset_y = getConfig(['legend', 'inset', 'y'], 0),
__legend_inset_step = getConfig(['legend', 'inset', 'step']),
__legend_item_onclick = getConfig(['legend', 'item', 'onclick']),
__legend_item_onmouseover = getConfig(['legend', 'item', 'onmouseover']),
__legend_item_onmouseout = getConfig(['legend', 'item', 'onmouseout']),
@ -377,6 +382,9 @@
};
var isLegendRight = __legend_position === 'right';
var isLegendInset = __legend_position === 'inset';
var isLegendTop = __legend_inset_anchor === 'top-left' || __legend_inset_anchor === 'top-right';
var isLegendLeft = __legend_inset_anchor === 'top-left' || __legend_inset_anchor === 'bottom-left';
var legendStep = 0, legendItemWidth = 0, legendItemHeight = 0, legendOpacityForHidden = 0.15;
var currentMaxTickWidth = 0;
@ -445,7 +453,7 @@
// MEMO: each value should be int to avoid disabling antialiasing
function updateSizes() {
var legendHeight = getLegendHeight(), legendWidth = getLegendWidth(),
legendHeightForBottom = isLegendRight ? 0 : legendHeight,
legendHeightForBottom = isLegendRight || isLegendInset ? 0 : legendHeight,
hasArc = hasArcType(c3.data.targets),
xAxisHeight = __axis_rotated || hasArc ? 0 : getHorizontalAxisHeight('x'),
subchartHeight = __subchart_show && !hasArc ? (__subchart_size_height + xAxisHeight) : 0;
@ -482,11 +490,15 @@
};
}
// for legend
var insetLegendPosition = {
top: isLegendTop ? getCurrentPaddingTop() + __legend_inset_y + 5.5 : currentHeight - legendHeight - getCurrentPaddingBottom() - __legend_inset_y,
left: isLegendLeft ? getCurrentPaddingLeft() + __legend_inset_x + 0.5 : currentWidth - legendWidth - getCurrentPaddingRight() - __legend_inset_x + 0.5
};
margin3 = {
top: isLegendRight ? 0 : currentHeight - legendHeight,
top: isLegendRight ? 0 : isLegendInset ? insetLegendPosition.top : currentHeight - legendHeight,
right: NaN,
bottom: 0,
left: isLegendRight ? currentWidth - legendWidth : 0
left: isLegendRight ? currentWidth - legendWidth : isLegendInset ? insetLegendPosition.left : 0
};
width = currentWidth - margin.left - margin.right;
@ -570,7 +582,7 @@
function getHorizontalAxisHeight(axisId) {
if (axisId === 'x' && !__axis_x_show) { return 0; }
if (axisId === 'x' && __axis_x_height) { return __axis_x_height; }
if (axisId === 'y' && !__axis_y_show) { return __legend_show && !isLegendRight ? 10 : 1; }
if (axisId === 'y' && !__axis_y_show) { return __legend_show && !isLegendRight && !isLegendInset ? 10 : 1; }
if (axisId === 'y2' && !__axis_y2_show) { return rotated_padding_top; }
return (getAxisLabelPositionById(axisId).isInner ? 30 : 40) + (axisId === 'y2' ? -10 : 0);
}
@ -656,10 +668,20 @@
legendItemHeight = h;
}
function getLegendWidth() {
return __legend_show ? isLegendRight ? legendItemWidth * (legendStep + 1) : currentWidth : 0;
return __legend_show ? isLegendRight || isLegendInset ? legendItemWidth * (legendStep + 1) : currentWidth : 0;
}
function getLegendHeight() {
return __legend_show ? isLegendRight ? currentHeight : Math.max(20, legendItemHeight) * (legendStep + 1) : 0;
var h = 0;
if (__legend_show) {
if (isLegendRight) {
h = currentHeight;
} else if (isLegendInset) {
h = __legend_inset_step ? Math.max(20, legendItemHeight) * (__legend_inset_step + 1) : height;
} else {
h = Math.max(20, legendItemHeight) * (legendStep + 1);
}
}
return h;
}
//-- Scales --//
@ -4555,8 +4577,8 @@
var box = getTextRect(textElement.textContent, CLASS.legendItem),
itemWidth = Math.ceil((box.width + paddingRight) / 10) * 10,
itemHeight = Math.ceil((box.height + paddingTop) / 10) * 10,
itemLength = isLegendRight ? itemHeight : itemWidth,
areaLength = isLegendRight ? getLegendHeight() : getLegendWidth(),
itemLength = isLegendRight || isLegendInset ? itemHeight : itemWidth,
areaLength = isLegendRight || isLegendInset ? getLegendHeight() : getLegendWidth(),
margin, maxLength;
// MEMO: care about condifion of step, totalLength
@ -4570,7 +4592,7 @@
}
}
steps[id] = step;
margins[step] = margin;
margins[step] = isLegendInset ? 10 : margin;
offsets[id] = totalLength;
totalLength += itemLength;
}
@ -4592,7 +4614,7 @@
if (!maxWidth || itemWidth >= maxWidth) { maxWidth = itemWidth; }
if (!maxHeight || itemHeight >= maxHeight) { maxHeight = itemHeight; }
maxLength = isLegendRight ? maxHeight : maxWidth;
maxLength = isLegendRight || isLegendInset ? maxHeight : maxWidth;
if (__legend_equally) {
Object.keys(widths).forEach(function (id) { widths[id] = maxWidth; });
@ -4614,6 +4636,9 @@
if (isLegendRight) {
xForLegend = function (id) { return maxWidth * steps[id]; };
yForLegend = function (id) { return margins[steps[id]] + offsets[id]; };
} else if (isLegendInset) {
xForLegend = function (id) { return maxWidth * steps[id] + 10; };
yForLegend = function (id) { return margins[steps[id]] + offsets[id]; };
} else {
xForLegend = function (id) { return margins[steps[id]] + offsets[id]; };
yForLegend = function (id) { return maxHeight * steps[id]; };
@ -4655,21 +4680,29 @@
.text(function (id) { return isDefined(__data_names[id]) ? __data_names[id] : id; })
.each(function (id, i) { updatePositions(this, id, i === 0); })
.style("pointer-events", "none")
.attr('x', isLegendRight ? xForLegendText : -200)
.attr('y', isLegendRight ? -200 : yForLegendText);
.attr('x', isLegendRight || isLegendInset ? xForLegendText : -200)
.attr('y', isLegendRight || isLegendInset ? -200 : yForLegendText);
l.append('rect')
.attr("class", CLASS.legendItemEvent)
.style('fill-opacity', 0)
.attr('x', isLegendRight ? xForLegendRect : -200)
.attr('y', isLegendRight ? -200 : yForLegendRect);
.attr('x', isLegendRight || isLegendInset ? xForLegendRect : -200)
.attr('y', isLegendRight || isLegendInset ? -200 : yForLegendRect);
l.append('rect')
.attr("class", CLASS.legendItemTile)
.style("pointer-events", "none")
.style('fill', color)
.attr('x', isLegendRight ? xForLegendText : -200)
.attr('y', isLegendRight ? -200 : yForLegend)
.attr('x', isLegendRight || isLegendInset ? xForLegendText : -200)
.attr('y', isLegendRight || isLegendInset ? -200 : yForLegend)
.attr('width', 10)
.attr('height', 10);
// Set background for inset legend
if (isLegendInset && maxWidth !== 0) {
legend.insert('g', '.' + CLASS.legendItem)
.attr("class", CLASS.legendBackground)
.append('rect')
.attr('height', getLegendHeight() - 10)
.attr('width', maxWidth * (step + 1) + 10);
}
texts = legend.selectAll('text')
.data(targetIds)

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

30
htdocs/samples/legend.html
Unescape View File

@ -7,13 +7,15 @@
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var columns = [];
for (var i = 0; i < 30; i++ ) {
for (var i = 0; i < 28; i++ ) {
columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i];
}
@ -39,13 +41,23 @@
data: {
columns: columns,
},
legend: {
position: 'inset',
},
});
c3.generate({
bindto: '#chart4',
data: {
columns: columns,
},
axis: {
rotated: true,
},
});
c3.generate({
bindto: '#chart4',
bindto: '#chart5',
data: {
columns: columns,
},
@ -56,6 +68,20 @@
rotated: true,
},
});
c3.generate({
bindto: '#chart6',
data: {
columns: columns,
},
legend: {
position: 'inset'
},
axis: {
rotated: true,
},
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save