Dojo堆叠柱状图问题在堆叠的顶部添加总堆叠值
Dojo Stacked column chart issues in add total stacked value on the top of stacked
我的dojo堆叠柱状图似乎有问题。每个堆栈值都被放置在堆叠图表的"内部"。但我希望这些叠加的总数应该在顶部,但在图表之外,就在x轴标签之上。那么我如何实现堆栈总数显示在堆叠列的顶部。这是我的网站链接。这里我需要在栏的顶部显示我的总堆叠值,以及每个堆叠值的工具提示。
我的代码是
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的序列时,工具提示显示静态序列名称value: 300和value: 244。悬停在这些系列上时。我希望它仍然显示AC: 300和TV: 244,总堆叠值显示在堆叠的顶部为total: 544。但我无法得到这种类型的价值。谢谢你的帮助。
我不是100%确定你最终想要实现什么,但你绝对可以通过使用以下文本函数显示"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/
编辑:在您的示例中,您还缺少正确显示工具提示所需的CSS。您需要添加:
<link rel="stylesheet" href="dojoinstall/dijit/themes/claro/claro.css">
并在你的身体上使用claro类:
<body class="claro">
:
http://jsfiddle.net/B45PW/4/相关文章:
- 如何在引导程序元素的顶部添加掩码
- 如何使用DWR addRows函数在顶部添加行
- 在JSON顶部添加值
- 仅在顶部添加了 1 行代码
- 在表格顶部添加新行
- 向 JSON 对象的顶部添加内容
- 为什么数据表在我的表顶部添加行
- D3 js 更新图只是在顶部添加新点
- 从顶部添加条目,以角度排列待办事项列表
- jQuery-如何动画滚动到元素并在顶部添加100px
- fullpage.js和在页面顶部添加/删除类
- 在图像顶部添加数字
- AngularJS:在DOM顶部添加一个loader元素
- D3:如何在分组条形图的每个条形图顶部添加标签
- 转换导航栏'dropup'& # 39;拉# 39;当使用JS在顶部添加时
- Nivo滑块在顶部添加徽标
- Javascript在顶部添加变量
- Dojo堆叠柱状图问题在堆叠的顶部添加总堆叠值
- 为布局中的元素添加内边距'在顶部添加空白空间
- JavaScript Raphael,通过不同的函数在矩形顶部添加文本