Dojo堆叠列图问题在堆叠顶部添加总堆叠值

编程入门行业动态更新时间:2024-10-12 14:24:14

本文介绍了Dojo堆叠列图问题在堆叠顶部添加总堆叠值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述我似乎对我的dojo堆叠列图有问题。每个堆栈值都放置在堆叠图表的内部中。但是我希望这些堆叠的总计应在顶部，但在图表之外，就在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]，函数（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] ; }

另请参见： jsfiddle/B45PW/3/

编辑：在你的例子中你也是缺少正确显示工具提示所需的CSS。您需要添加：

< link rel =stylesheethref =dojoinstall / dijit / themes / claro / claro。 CSS>

并使用您身体的claro类：

< body class =claro>

请参阅：

jsfiddle/B45PW/4/

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]; }