Dojo堆叠列图问题在堆叠顶部添加总堆叠值 [英] Dojo Stacked column chart issues in add total stacked value on the top of stacked
问题描述
这是我的代码是
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]，
函数（Chart，Lines，Default，StackedColumns，Tooltip，ready，SelectableLegend）{
ready（function（）{
var chart1 = new图表（chart1）;
chart1.title =堆积图;
chart1.addPlot（stackedColumnsPlot，{
类型：StackedColumns，
gap：6，
行：true，
区域：true，
标记：true，
标签：true，
labelStyle：inside，
// maxBarSize：35 ，
张力：2
}）;
chart1.addAxis（x ，{
dropLabels：false，
labelSizeChange：true，
轮换：-20，
majorTicks：true，
majorTickStep：1，
minorTicks：false ，
font：normal normal bold 12px Tahoma，
fontColor：black，
labels：[{value：1，text：A}，{值 ：2，文本 ： B }，{ 值 ：3，文本 ： C }，{ 值 ：4，文本 ： D }，{ 值 ：5，text：E}，{value：6，text：F}]
}）;
chart1.addAxis（y，{title：Cost，
fixLower：major，
fixUpper：major，
includeZero：true，
majorTickStep：500，
max：1500，
// from：1000，
//到：6000，
vertical：true
}）;
chart1.addSeries（AC，[300,500,500,600,300,280]，
{
plot：stackedColumnsPlot，
stroke：{
颜色：#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 + chartItem.run.data [chartItem.index] +;总值：+ chartItem.y;
//返回Comparision Rating：+ chartItem.y;
returnValue： + chartItem.run.data [chartItem.index] +;堆栈值：+ chartItem.y;
}
}）;
chart1.render（）;
new SelectableLegend（{
chart：chart1，
horizontal：true，
align：top
}，chart1SelectableLegend）;
}）;
}）;
根据我的经验，当我有一系列的第一个值：300，另一个是第一个值： 244，工具提示显示静态系列名称值：300，值：244.悬停在这些系列上。我希望它仍然显示AC：300和电视：244，总堆叠值显示在堆叠的顶部总计：544
但我无法获得这种类型的价值。
欣赏任何帮助。
我不是100％肯定你最终要达到什么您可以使用以下文本功能绝对不理会AC：300，TV：244：
text：function（chartItem，情节）{
returnAC：+ plot.series [0] .data [chartItem.index] +
，TV：+ plot.series [1] .data [chartItem.index] ;
}
另请参见： http://jsfiddle.net/B45PW/3/
编辑：在你的例子中你也是缺少正确显示工具提示所需的CSS。您需要添加：
< link rel =stylesheethref =dojoinstall / dijit / themes / claro / claro。 CSS>
并使用您身体的claro类：
< body class =claro>
请参阅：
I seem to be having a problem with my dojo stacked column chart. Each stack values are placed "inside" the stacked chart. But I want these stacked totals should be at the top but outside the chart, just above the x axis labels. So How do I achieve where the stack totals are displayed just top the stacked columns . Here is my jsfiddle link. Here i need to show my Total stacked value on the top of bar, as well as tooltip for each stacked value also.
Here is my code is
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");
});
});
In my experience, when I have a series with first value: 300, and another with first value: 244, the tooltip shows static series name Value:300 and value: 244. when hovering over these series. I would like it to still show AC: 300 and TV: 244 with total stacked value show on the top of the stacked as Total: 544. But I am unble to get this type of value . Appreciate any help.
I'm not 100% sure what you are trying to achieve in the end but you can definitely dislpay "AC: 300, TV: 244" by using the following text function:
text: function(chartItem, plot) {
return "AC: "+plot.series[0].data[chartItem.index] +
", TV: "+plot.series[1].data[chartItem.index];
}
See also: http://jsfiddle.net/B45PW/3/
EDIT: In your example you are also missing the CSS needed for the tooltip to show up correctly. You need to add:
<link rel="stylesheet" href="dojoinstall/dijit/themes/claro/claro.css">
and use the claro class on your body:
<body class="claro">
See:
这篇关于Dojo堆叠列图问题在堆叠顶部添加总堆叠值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
