Теперь у меня есть несколько хороших графиков, но здесь я мог откусить больше, чем я могу жевать. Я знаю, что вы обычно не рассматриваете PieChart, где задействованы отрицательные группировки, но имейте в виду.
У меня есть столбец значений, которые я хочу отобразить в PieChart.
PieChart должно иметь 2 элемента: 1. Среднее значение положительных чисел 2. Среднее значение отрицательных чисел
Текстовый элемент срезов p ie должен иметь в виду 1. Положительное среднее £ ?? (?%) 2. Отрицательное среднее (?%)
Что я не могу понять, так это то, как PieChart работает с отрицательными значениями. Мой график P ie не имеет среза для отрицательного элемента. Подумав об этом, могу ли я включить множитель -1 только для отрицательных чисел.
Я думаю, я бы выделил положительные и отрицательные числа в отдельные массивы, скорректировав отрицательный массив с помощью miltiplier, затем реинкорпорировав два массива обратно в мою круговую диаграмму предлагают разумное решение? Если это не слишком обременительно, я был бы признателен за некоторые рекомендации по процессу здесь.
Я просто ожидал, например, среднего отрицательного значения, скажем, 20, среднего положительного значения 60. и процентов, показанных как 25% и 75%. Меня интересует отношение этих двух чисел друг к другу.
Выше приведено только то, что я использовал только общие значения. Мне также нужна помощь в извлечении и использовании средних значений.
<code><div id="paybacksplit"></div>
<pre id="data">
Trade,Payback
1,85
2,74
3,-90
4,77
5,93
6,85
7,95
8,98
9,98
10,-88
11,10
12,98
13,93
14,65
15,76
16,81
17,0
18,0
19,96
20,-9
21,96
22,94
23,96
24,94
25,-88
26,8
27,85
28,88
29,90
var pbschart = new dc.PieChart("#paybacksplit");
var trades = d3.csvParse(d3.select('pre#data').text());
trades.forEach(function(x) {
x.Payback = +x.Payback;
});
var ndx = crossfilter(trades),
tradeDimension = ndx.dimension(function(d) {
if (d.Payback >= 0)
return "Profitable";
else
return "Losing";
});
paybackSumGroup = tradeDimension.group().reduceSum(function(d) {return d.Payback;});
pbschart
.width(768)
.height(480)
.slicesCap(2)
.innerRadius(2)
.dimension(tradeDimension)
.group(paybackSumGroup)
.legend(dc.legend().highlightSelected(true))
.on('pretransition', function(chart) {
chart.selectAll('text.pie-slice').text(function(d) {
return d.data.key + ' £ '+ d.data.value + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
})
});
pbschart.render();
jsfiddle - здесь
Что произошло next;
Ответ Гордона помог, но я еще не достаточно умел, чтобы выяснить следующий этап, который должен был вернуть средние значения.
Однако, поскольку данные поступают из моих собственных данных, я просто реструктурировали вывод, чтобы обеспечить столбец с прибылью / убытком для каждого элемента и второй столбец со значениями (с отрицательными значениями, преобразованными в положительные значения).
С моим ограниченным знанием d c. js было легче перенастроить вывод моей базы данных. В итоге я получил
<code><div id="paybacksplit2"></div>
<!-- here's a way to load data from a jsfiddle, to avoid CORS
problems - see http://stackoverflow.com/a/22896088/676195
-->
<pre id="data">
Trade,Payback
Prof,85
Prof,74
Loss,90
Prof,77
Prof,93
Prof,85
Prof,95
Prof,98
Prof,98
Loss,88
Prof,10
Prof,98
Prof,93
Prof,65
Prof,76
Prof,81
Prof,0
Prof,0
Prof,96
Loss,9
Prof,96
Prof,94
Prof,96
Prof,94
Loss,88
Prof,8
Prof,85
Prof,88
Prof,90
и
var pbschart2 = new dc.PieChart("#paybacksplit2");
var numberFormat = d3.format("(.2f");
var trades = d3.csvParse(d3.select('pre#data').text());
trades.forEach(function(x) {
x.payback = +x.Payback
x.trade = x.Trade
;
});
var ndx = crossfilter(trades),
tradeDimension = ndx.dimension(function(d) {return d.trade;});
paybackSumGroup = tradeDimension.group().reduceSum(function(d) {return d.payback;});
var nameDim = ndx.dimension(function(d) { return d.trade; })
var totalValGroup = nameDim.group().reduce(reduceAddVal, reduceRemoveVal, reduceInitialVal);
var result = totalValGroup.top(Infinity);
console.log(result);
function reduceAddVal(p, v) {
++p.count;
p.totalVal += v.payback;
p.average = p.totalVal / p.count;
return p;
}
function reduceRemoveVal(p, v) {
--p.count;
p.totalVal -= v.payback;
p.average = p.totalVal / p.count;
return p;
}
function reduceInitialVal() {
return {
count: 0,
totalVal: 0,
average: 0
};
}
pbschart2
.width(768)
.height(200)
.slicesCap(2)
.dimension(nameDim)
.group(totalValGroup)
.valueAccessor(function (p) {
return p.value.average;
})
.legend(dc.legend().highlightSelected(true))
.on('pretransition', function(chart) {
chart.selectAll('text.pie-slice').text(function(d) {
return ' £ '+ numberFormat(d.data.value.average);
})
});
pbschart2.render();
, что дало мне следующее:
Что более или менее то, что я был после.
Обновленная скрипта здесь
Возможно, со временем я смогу сделать больше в d c. js, но так как у меня есть возможность определить свои собственные данные, извлеките это на данный момент для меня это был самый простой вариант.
Спасибо, Гордон, я добираюсь туда постепенно!