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

Fix show value on chart - #45

pull/51/head
Masayuki Tanaka 11 years ago
parent
d8286e498a
commit
b4c5f08190
1 changed files with 79 additions and 66 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. 145
      c3.js

145
c3.js
Unescape View File

@ -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;
@ -1392,37 +1410,24 @@
return path; return path;
}; };
}; };
//showValues on Bar - added 23.2.2014 - fiery-
var textVal = function (barIndices, isSub_, inIsXY) {
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;
var getXYForText = function (barIndices, isSub, forX) {
var getPoints = generateGetBarPoints(barIndices, isSub);
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'; }) .style("stroke", 'none')
.attr('y', textVal(barIndices, false, 'Y')) .style("opacity", 0)
.attr('x', textVal(barIndices, false, 'X')) .text(function (d) { return formattedValue(d.value); });
.attr('dy', '.32em') mainText
.style("stroke", 'none') .style("opacity", initialOpacity)
.style("opacity", 0) .transition().duration(duration)
.text(function (d) { return formattedValue(d.value); }) .attr('x', getXForText(barIndices))
.attr("class", classTextBar); .attr('y', getYForText(barIndices))
mainBarTxt .style("opacity", opacityText);
.style("opacity", initialOpacity) mainText.exit()
.transition().duration(duration) .transition().duration(duration)
.attr('y', textVal(barIndices, false, 'Y')) .style('opacity', 0)
.attr('x', textVal(barIndices, false, 'X')) .remove();
.style("opacity", 1);
mainBarTxt.exit()
.transition().duration(duration)
.style('opacity', 0)
.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')

Write Preview
Loading…
Cancel
Save