Browse Source

Fix show value on chart - #45

pull/51/head
Masayuki Tanaka 11 years ago
parent
commit
b4c5f08190
  1. 131
      c3.js

131
c3.js

@ -4,8 +4,6 @@
var c3 = window.c3 = {}; var c3 = window.c3 = {};
var d3 = window.d3; var d3 = window.d3;
var showValues = true; //added 23.2.2014 - fiery-
var mainBarTxt = null; //
/* /*
* Generate chart according to config * Generate chart according to config
*/ */
@ -61,6 +59,7 @@
__data_axes = getConfig(['data', 'axes'], {}), __data_axes = getConfig(['data', 'axes'], {}),
__data_type = getConfig(['data', 'type'], null), __data_type = getConfig(['data', 'type'], null),
__data_types = getConfig(['data', 'types'], {}), __data_types = getConfig(['data', 'types'], {}),
__data_labels = getConfig(['data', 'labels'], {}),
__data_order = getConfig(['data', 'order'], null), __data_order = getConfig(['data', 'order'], null),
__data_regions = getConfig(['data', 'regions'], {}), __data_regions = getConfig(['data', 'regions'], {}),
__data_colors = getConfig(['data', 'colors'], {}), __data_colors = getConfig(['data', 'colors'], {}),
@ -864,6 +863,8 @@
function category(i) { function category(i) {
return i < __axis_x_categories.length ? __axis_x_categories[i] : i; return i < __axis_x_categories.length ? __axis_x_categories[i] : i;
} }
function classText(d) { return "-text -text-" + d.id; }
function classTexts(d) { return "-texts -texts-" + d.id; }
function classShapes(d) { return "-shapes -shapes-" + d.id; } function classShapes(d) { return "-shapes -shapes-" + d.id; }
function classLine(d) { return classShapes(d) + " -line -line-" + d.id; } function classLine(d) { return classShapes(d) + " -line -line-" + d.id; }
function classCircles(d) { return classShapes(d) + " -circles -circles-" + d.id; } function classCircles(d) { return classShapes(d) + " -circles -circles-" + d.id; }
@ -875,11 +876,20 @@
function classBar(d, i) { return classShape(d, i) + " -bar -bar-" + i; } function classBar(d, i) { return classShape(d, i) + " -bar -bar-" + i; }
function classRegion(d, i) { return 'region region-' + i + ' ' + ('classes' in d ? [].concat(d.classes).join(' ') : ''); } function classRegion(d, i) { return 'region region-' + i + ' ' + ('classes' in d ? [].concat(d.classes).join(' ') : ''); }
function classEvent(d, i) { return "event-rect event-rect-" + i; } function classEvent(d, i) { return "event-rect event-rect-" + i; }
function classTextBar(d, i) { return classShape(d, i) + " -bartxt -bartxt-" + i; } //added 24.2.2014 - fiery-
function opacityCircle(d) { function opacityCircle(d) {
return isValue(d.value) ? isScatterType(d) ? 0.5 : 1 : 0; return isValue(d.value) ? isScatterType(d) ? 0.5 : 1 : 0;
} }
function opacityText(d) {
if (typeof __data_labels === 'boolean' && __data_labels) {
return 1;
} else if (__data_labels[d.id] === 'boolean' && __data_labels[d.id]) {
return 1;
} else if (__data_labels[d.id] && __data_labels[d.id].show) {
return 1;
}
return 0;
}
function xx(d) { function xx(d) {
return d ? x(d.x) : null; return d ? x(d.x) : null;
@ -1183,6 +1193,9 @@
function lineOrScatterData(d) { function lineOrScatterData(d) {
return isLineType(d) || isScatterType(d) ? d.values : []; return isLineType(d) || isScatterType(d) ? d.values : [];
} }
function barOrLineData(d) {
return isBarType(d) || isLineType(d) ? d.values : [];
}
//-- Color --// //-- Color --//
@ -1358,26 +1371,31 @@
}; };
})(); })();
var drawBar = function (barIndices, isSub_) { function generateGetBarPoints(barIndices, isSub) {
var barTargetsNum = barIndices.__max__ + 1, var barTargetsNum = barIndices.__max__ + 1,
isSub = arguments.length > 1 ? isSub_ : true,
barW = getBarW(xAxis, barTargetsNum), barW = getBarW(xAxis, barTargetsNum),
x = getBarX(barW, barTargetsNum, barIndices, !!isSub), x = getBarX(barW, barTargetsNum, barIndices, !!isSub),
y = getBarY(!!isSub), y = getBarY(!!isSub),
barOffset = getBarOffset(barIndices, !!isSub), barOffset = getBarOffset(barIndices, !!isSub),
yScale = isSub ? getSubYScale : getYScale; yScale = isSub ? getSubYScale : getYScale;
return function (d, i) { return function (d, i) {
var y0 = yScale(d.id)(0), var y0 = yScale(d.id)(0),
offset = barOffset(d, i) || y0; // offset is for stacked bar chart offset = barOffset(d, i) || y0; // offset is for stacked bar chart
// 4 points that make a bar // 4 points that make a bar
var points = [ return [
[x(d), offset], [x(d), offset],
[x(d), y(d) - (y0 - offset)], [x(d), y(d) - (y0 - offset)],
[x(d) + barW, y(d) - (y0 - offset)], [x(d) + barW, y(d) - (y0 - offset)],
[x(d) + barW, offset] [x(d) + barW, offset]
]; ];
};
}
var drawBar = function (barIndices, isSub) {
var getPoints = generateGetBarPoints(barIndices, isSub);
return function (d, i) {
// 4 points that make a bar
var points = getPoints(d, i);
// switch points if axis is rotated, not applicable for sub chart // switch points if axis is rotated, not applicable for sub chart
var indexX = __axis_rotated ? 1 : 0; var indexX = __axis_rotated ? 1 : 0;
@ -1393,36 +1411,23 @@
}; };
}; };
//showValues on Bar - added 23.2.2014 - fiery- var getXYForText = function (barIndices, isSub, forX) {
var textVal = function (barIndices, isSub_, inIsXY) { var getPoints = generateGetBarPoints(barIndices, isSub);
var barTargetsNum = barIndices.__max__ + 1,
isSub = arguments.length > 1 ? isSub_ : true,
barW = getBarW(xAxis, barTargetsNum, !!isSub),
x = getBarX(barW, barTargetsNum, barIndices, !!isSub),
y = getBarY(!!isSub),
barOffset = getBarOffset(barIndices, !!isSub),
yScale = isSub ? getSubYScale : getYScale;
return function (d, i) { return function (d, i) {
var y0 = yScale(d.id)(0), var points = getPoints(d, i);
offset = barOffset(d, i) || y0; // offset is for stacked bar chart if (forX) {
return __axis_rotated ? points[2][1] + (d.value < 0 ? -4 : 4) : points[0][0] + (points[2][0] - points[0][0]) / 2;
// 4 points that make a bar } else {
var points = [ return __axis_rotated ? (points[0][0] + points[2][0] + this.offsetHeight * 0.6) / 2 : points[2][1] + (d.value < 0 ? this.offsetHeight : -3);
[x(d), offset], }
[x(d), y(d) - (y0 - offset)],
[x(d) + barW, y(d) - (y0 - offset)],
[x(d) + barW, offset]
];
// switch points if axis is rotated, not applicable for sub chart
var indexX = __axis_rotated ? 1 : 0;
var indexY = __axis_rotated ? 0 : 1;
if (inIsXY === 'X') { return d.value < 0 ? points[2][indexX] - 4 : points[2][indexX] + 4; }
return (points[0][indexY] + points[2][indexY]) / 2;
}; };
}; };
function getXForText(barIndices, isSub) {
return getXYForText(barIndices, isSub, true);
}
function getYForText(barIndices, isSub) {
return getXYForText(barIndices, isSub, false);
}
// For brush region // For brush region
var lineOnSub = (function () { var lineOnSub = (function () {
@ -1719,7 +1724,7 @@
.text(function (d) { return d.text; }); .text(function (d) { return d.text; });
} }
// Area // Regions
main.append('g') main.append('g')
.attr("clip-path", clipPath) .attr("clip-path", clipPath)
.attr("class", "regions"); .attr("class", "regions");
@ -1752,6 +1757,9 @@
.style("text-anchor", "middle") .style("text-anchor", "middle")
.text(__arc_title); .text(__arc_title);
main.select(".chart").append("g")
.attr("class", "chart-texts");
if (__zoom_enabled) { // TODO: __zoom_privileged here? if (__zoom_enabled) { // TODO: __zoom_privileged here?
// if zoom privileged, insert rect to forefront // if zoom privileged, insert rect to forefront
main.insert('rect', __zoom_privileged ? null : 'g.grid') main.insert('rect', __zoom_privileged ? null : 'g.grid')
@ -2100,7 +2108,7 @@
function redraw(options) { function redraw(options) {
var xgrid, xgridData, xgridLines, ygrid, ygridLines; var xgrid, xgridData, xgridLines, ygrid, ygridLines;
var mainCircle, mainBar, mainRegion, contextBar, eventRectUpdate; var mainCircle, mainBar, mainRegion, mainText, contextBar, eventRectUpdate;
var barIndices = getBarIndices(), maxDataCountTarget; var barIndices = getBarIndices(), maxDataCountTarget;
var rectX, rectW; var rectX, rectW;
var withY, withSubchart, withTransition, withTransform, withUpdateXDomain, withUpdateOrgXDomain; var withY, withSubchart, withTransition, withTransform, withUpdateXDomain, withUpdateOrgXDomain;
@ -2216,7 +2224,7 @@
mainBar = main.selectAll('.-bars').selectAll('.-bar') mainBar = main.selectAll('.-bars').selectAll('.-bar')
.data(barData); .data(barData);
mainBar.enter().append('path') mainBar.enter().append('path')
.attr('d', drawBar(barIndices, false)) .attr('d', drawBar(barIndices))
.style("stroke", 'none') .style("stroke", 'none')
.style("opacity", 0) .style("opacity", 0)
.style("fill", function (d) { return color(d.id); }) .style("fill", function (d) { return color(d.id); })
@ -2224,36 +2232,30 @@
mainBar mainBar
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr('d', drawBar(barIndices, false)) .attr('d', drawBar(barIndices))
.style("opacity", 1); .style("opacity", 1);
mainBar.exit().transition().duration(duration) mainBar.exit().transition().duration(duration)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
//showValues on Bar - added 23.2.2014 - fiery- mainText = main.selectAll('.-texts').selectAll('.-text')
if (showValues) { .data(barOrLineData);
mainBarTxt = main.selectAll('.-bars').selectAll('.-bartxt') mainText.enter().append('text')
.data(barData); .attr("class", classText)
mainBarTxt.enter().append('text') .attr('text-anchor', function (d) { return __axis_rotated ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.attr('text-anchor', function (d) { return d.value < 0 ? 'end' : 'start'; })
.attr('y', textVal(barIndices, false, 'Y'))
.attr('x', textVal(barIndices, false, 'X'))
.attr('dy', '.32em')
.style("stroke", 'none') .style("stroke", 'none')
.style("opacity", 0) .style("opacity", 0)
.text(function (d) { return formattedValue(d.value); }) .text(function (d) { return formattedValue(d.value); });
.attr("class", classTextBar); mainText
mainBarTxt
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr('y', textVal(barIndices, false, 'Y')) .attr('x', getXForText(barIndices))
.attr('x', textVal(barIndices, false, 'X')) .attr('y', getYForText(barIndices))
.style("opacity", 1); .style("opacity", opacityText);
mainBarTxt.exit() mainText.exit()
.transition().duration(duration) .transition().duration(duration)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
}
// lines and cricles // lines and cricles
main.selectAll('.-line') main.selectAll('.-line')
@ -2331,14 +2333,14 @@
contextBar = context.selectAll('.-bars').selectAll('.-bar') contextBar = context.selectAll('.-bars').selectAll('.-bar')
.data(barData); .data(barData);
contextBar.enter().append('path') contextBar.enter().append('path')
.attr('d', drawBar(barIndices)) .attr('d', drawBar(barIndices, true))
.style("stroke", 'none') .style("stroke", 'none')
.style("fill", function (d) { return color(d.id); }) .style("fill", function (d) { return color(d.id); })
.attr("class", classBar); .attr("class", classBar);
contextBar contextBar
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr('d', drawBar(barIndices)) .attr('d', drawBar(barIndices, true))
.style('opacity', 1); .style('opacity', 1);
contextBar.exit().transition().duration(duration) contextBar.exit().transition().duration(duration)
.style('opacity', 0) .style('opacity', 0)
@ -2502,11 +2504,22 @@
} }
function updateTargets(targets) { function updateTargets(targets) {
var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate, mainPieEnter, mainPieUpdate; var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate, mainPieEnter, mainPieUpdate, mainTextUpdate, mainTextEnter;
var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate; var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate;
/*-- Main --*/ /*-- Main --*/
//-- Text --//
mainTextUpdate = main.select('.chart-texts')
.selectAll('.chart-text')
.data(targets);
mainTextEnter = mainTextUpdate.enter().append('g')
.attr('class', function (d) { return 'chart-text target target-' + d.id; })
.style("pointer-events", "none");
mainTextEnter.append('g')
.attr('class', classTexts)
.style("fill", function (d) { return color(d.id); });
//-- Bar --// //-- Bar --//
mainBarUpdate = main.select('.chart-bars') mainBarUpdate = main.select('.chart-bars')
.selectAll('.chart-bar') .selectAll('.chart-bar')

Loading…
Cancel
Save