我得到了一個場景,我需要顯示堆棧多條形圖表中每個堆棧的值--nvd3圖形,因爲我們可以顯示離散值中的值--nvd3圖形。如何顯示堆積多條形圖表中的值 - nvd3圖表
據我所知,'showvalue'用於discrete bar controller,我們可以在堆積圖中使用showvalue
,如果不是請用另一種解決方案建議。
在此先感謝
我得到了一個場景,我需要顯示堆棧多條形圖表中每個堆棧的值--nvd3圖形,因爲我們可以顯示離散值中的值--nvd3圖形。如何顯示堆積多條形圖表中的值 - nvd3圖表
據我所知,'showvalue'用於discrete bar controller,我們可以在堆積圖中使用showvalue
,如果不是請用另一種解決方案建議。
在此先感謝
目前不可能。該選項僅在離散條形圖中可用。
從維護者:
我們沒有這個能力。堆積/分組圖表也有複雜的動畫,這使得這是一個棘手的事情來解決。我們使用工具提示代替。
來源https://github.com/novus/nvd3/issues/150
如果要做到這一點,你需要使用D3,讓您自己的實現。這裏有一個很好的例子http://plnkr.co/edit/BNpAlFalKz0zkkSszHh1?p=preview。它使用有角度的包裝,但這是一個很好的起點。
var app = angular.module('app', ['nvd3ChartDirectives']);
app.controller('chartCtrl', function($scope, $timeout) {
var ANIMATION_TIME = 1500,
countSeriesDisplayed = 2,
promise,
labels = ["label1", "label2", "label3", "label4", "label5"];
$scope.isStacked = false;
// Example data
$scope.chartData = [{
"key": "Series 1",
"values": [
[0, 10],
[1, 20],
[2, 30],
[3, 40],
[4, 50]
]
}, {
"key": "Series 2",
"values": [
[0, 10],
[1, 40],
[2, 60],
[3, 20],
[4, 40]
]
}];
/* To add labels, images, or other nodes on the created SVG, we need to wait
* for the chart to be rendered with a callback.
* Once the chart is rendered, a timeout is set to wait for the animation to
* finish.
*
* Then, we need to find the position of the labels and set it with the
* transform attribute in SVG.
* To do so, we have to get the width and height of each bar/group of bar
* which changes if stacked or not
*
*/
// Callback called when the chartData is assigned
$scope.initLabels = function() {
return function(graph) {
promise = $timeout(function() {
var svg = d3.select("svg"),
lastRects, rectWidth,
heightForXvalue = []; // Used for grouped mode
// We get one positive rect of each serie from the svg (here the last serie)
lastRects = svg.selectAll("g.nv-group").filter(
function(d, i) {
return i == countSeriesDisplayed - 1;
}).selectAll("rect.positive");
if ($scope.isStacked) {
// If stacked, we get the width of one rect
rectWidth = lastRects.filter(
function(d, i) {
return i == countSeriesDisplayed - 1;
}).attr("width");
} else {
// If grouped, we need to get the greatest height of each bar
var nvGroups = svg.selectAll("g.nv-group").selectAll("rect.positive");
nvGroups.each(
function(d, i) {
// Get the Min height space for each group (Max height for each group)
var rectHeight = parseFloat(d3.select(this).attr("y"));
if (angular.isUndefined(heightForXvalue[i])) {
heightForXvalue[i] = rectHeight;
} else {
if (rectHeight < heightForXvalue[i]) {
heightForXvalue[i] = rectHeight;
}
}
}
);
// We get the width of one rect multiplied by the number of series displayed
rectWidth = lastRects.filter(
function(d, i) {
return i == countSeriesDisplayed - 1;
}).attr("width") * countSeriesDisplayed;
}
// We choose a width equals to 70% of the group width
var labelWidth = rectWidth * 70/100;
var groupLabels = svg.select("g.nv-barsWrap").append("g");
lastRects.each(
function(d, index) {
var transformAttr = d3.select(this).attr("transform");
var yPos = parseFloat(d3.select(this).attr("y"));
groupLabels.append("text")
.attr("x", (rectWidth/2) - (labelWidth /2)) // We center the label
// We add a padding of 5 above the highest rect
.attr("y", (angular.isUndefined(heightForXvalue[index]) ? yPos : heightForXvalue[index]) - 5)
// We set the text
.text(labels[index])
.attr("transform", transformAttr)
.attr("class", "bar-chart-label");
});
}, ANIMATION_TIME);
}
};
// Tooltips
$scope.toolTipContentFunction = function() {
return function (key, x, y, e, graph) {
return labels[x];
}
};
$scope.$on('$destroy', function() {
// Cancel timeout if still active
$timeout.cancel(promise);
});
});
UPDATE:
我創建了一個要點,可以幫助你自己來實現這一點。
非常感謝。我在'renderEnd'函數內部調用了編寫的代碼,現在可以看到頂部的值。 – Karthik
我也在尋找那個答案。 – Itumac