Dojo Stacked Column Collection Проблемы в добавлении общего сложенного значения на верхней части штабелирования
-
21-12-2019 - |
Вопрос
Я, кажется, испытываю проблему с моим сложенным колонкой Dojo Collection.Каждое значение стека размещены «внутри» сложенного диаграммы.Но я хочу, чтобы эти штабелированные итоги должны быть на вершине, но за пределами диаграммы, чуть выше этикетки оси X.Итак, как мне добиться, где итоги стека отображаются только в верхнем сложенном столбцах.Вот мой jsfiddle Ссылка .Здесь мне нужно показать мою полное сложенное значение на верхней части панели, а также всплывающую подсказку для каждого сложенного значения.
Вот мой код
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend"],
function(Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend) {
ready(function() {
var chart1 = new Chart("chart1");
chart1.title = "stacked chart";
chart1.addPlot("stackedColumnsPlot", {
type: StackedColumns,
gap:6,
lines: true,
areas: true,
markers: true,
labels: true,
labelStyle:"inside",
//maxBarSize: 35,
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation:-20,
majorTicks:true,
majorTickStep:1,
minorTicks:false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [{"value":1,"text":"A"},{"value":2,"text":"B"},{"value":3,"text":"C"},{"value":4,"text":"D"},{"value":5,"text":"E"},{"value":6,"text":"F"}]
});
chart1.addAxis("y", {title:"Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep:500,
max: 1500,
//from:1000,
//to:6000,
vertical: true
});
chart1.addSeries("AC",[300,500,500,600,300,280] ,
{
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF" ,
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244,301,699,620,820,837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500,100,100,100,200,250] , {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100,150,100,700,700,0,800,300,300] , {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
new Tooltip(chart1, "stackedColumnsPlot", {
text: function(chartItem) {
console.debug(chartItem);
//return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y;
// return "Comparision Rating: " + chartItem.y;
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align:top
}, "chart1SelectableLegend");
});
});
.
В моем опыте, когда у меня есть серия с первым значением: 300, а другая с первым значением: 244, подсказка показывает значение статического серии, значение имени: 300 и значение: 244. При парении на эти серии.Я хотел бы, чтобы он по-прежнему показать AC: 300 и телевизор: 244 с общей сложным значенным шоу на верхней части штабелированного в общей сложности: 544. Но я RUNBE, чтобы получить этот тип стоимости. Цените любую помощь.
Решение
Я не на 100% уверен, что вы пытаетесь достичь в конце, но вы можете определенно Dislpay «AC: 300, TV: 244», используя следующую текстовую функцию:
text: function(chartItem, plot) {
return "AC: "+plot.series[0].data[chartItem.index] +
", TV: "+plot.series[1].data[chartItem.index];
}
.
См. Также: http://jsfiddle.net/b45pw/3/
Редактировать: В вашем примере вы также отсутствуете, необходимые для подсказки, необходимые для подсказки, чтобы отобразить правильно.Вам нужно добавить:
<link rel="stylesheet" href="dojoinstall/dijit/themes/claro/claro.css">
.
и используйте класс CLARO на вашем теле:
<body class="claro">
.
См.: