chart柱状图显示乱序customData的每组柱字顺序和我给的数据不一致 20C

var yearCount = result.legend.length;
var categoryCount = result.category.length;

                                var xAxisData = result.category;
                                var customData = [];
                                var legendData = [];
                                var dataList = [];

                                legendData.push('trend');
                                var encodeY = [];
                                for (var i = 0; i < yearCount; i++) {
                                    legendData.push(result.legend[i]);
                                    dataList.push([]);

// customData.push(result.series[i].listData);
encodeY.push(1 + i);
}

                                for (var i = 0; i < categoryCount; i++) {

// xAxisData.push('category' + i);
var customVal = [i];
customData.push(customVal);

// var data = dataList[0];
for (var j = 0; j < dataList.length; j++) {
dataList[j].push(result.series[i].listData[j]);
customVal.push(result.series[i].listData[j]);
}
}

                                function renderItem(params, api) {
                                    var xValue = api.value(0);
                                    var currentSeriesIndices = api.currentSeriesIndices();
                                    var barLayout = api.barLayout({
                                        barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
                                    });

                                    var points = [];
                                    for (var i = 0; i < currentSeriesIndices.length; i++) {
                                        var seriesIndex = currentSeriesIndices[i];
                                        if (seriesIndex !== params.seriesIndex) {
                                            var point = api.coord([xValue, api.value(seriesIndex)]);
                                            point[0] += barLayout[i - 1].offsetCenter;
                                            point[1] -= 20;
                                            points.push(point);
                                        }
                                    }
                                    var style = api.style({
                                        stroke: api.visual('color'),
                                        fill: null
                                    });

                                    return {
                                        type: 'polyline',
                                        shape: {
                                            points: points
                                        },
                                        style: style
                                    };
                                }

                                option = {
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data: legendData
                                    },

// dataZoom: [{
// type: 'slider',
// start: 50,
// end: 70
// }, {
// type: 'inside',
// start: 50,
// end: 70
// }],
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
type: 'custom',
name: 'trend',
renderItem: renderItem,
itemStyle: {
normal: {
borderWidth: 2
}
},
encode: {
x: 0,
y: encodeY
},
data: customData,
z: 100
}].concat(echarts.util.map(dataList, function (data, index) {
console.log(data);
console.log("legendData[index + 1] "+legendData[index + 1]);
return {
type: 'bar',
animation: false,
name: legendData[index + 1],
itemStyle: {
normal: {
opacity: 0.5
}
},
data: data
};

                                    }))
                                }; 

                                                                    console.log打印出来 数据顺序对着 ,谁知道为什么乱了 ![图片说明](https://img-ask.csdn.net/upload/201807/27/1532661125_387304.png)

1个回答

截图吧,估计你这是因为文字标题过长,就是每个柱状对应的文字过长,导致图标错位,解决办法,文字变短,或者加宽图表

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
chart 柱状图显示问题
我动态创建一个柱状图,通过AddXY(1,2,'一月',clred)来画图。本来想要得到的效果是横坐标显示一月,柱状图上显示数字2.可是现在柱状图上面显示的是一月。这是什么原因。麻烦大家指教一下?
raphael 柱图 chart
使用raphael 类库 可直接运行使用
echarts 柱状图 柱顶部显示数字
echarts 柱状图 柱顶部显示数字 series : [ { type:'bar', barWidth:50, data:[10, 52, 200, 334, 390, 330, 220], itemStyle: { ...
jfreechart 柱状图怎么显示柱条的值?
网上找的方法 ,但是说 不存在这个类。是我的版本低吗?有其他可行的方法吗?[img=https://img-bbs.csdn.net/upload/201312/30/1388378132_741714.jpg][/img]
JFreeChart 柱状图 不显示每个柱的数值
rnimport java.io.IOException;rnimport java.io.OutputStream;rnimport java.sql.Connection;rnimport java.sql.ResultSet;rnimport java.sql.SQLException;rnimport java.sql.Statement;rnrnimport javax.servlet.ServletException;rnimport javax.servlet.http.HttpServlet;rnimport javax.servlet.http.HttpServletRequest;rnimport javax.servlet.http.HttpServletResponse;rnimport org.jfree.chart.ChartFactory;rnimport org.jfree.chart.ChartUtilities;rnimport org.jfree.chart.JFreeChart;rnimport org.jfree.data.xy.*;rnimport org.jfree.data.general.*;rnimport org.jfree.data.time.*;rnimport org.jfree.chart.axis.ValueAxis;rnimport org.jfree.chart.labels.StandardCategoryItemLabelGenerator;rnimport org.jfree.chart.labels.StandardPieSectionLabelGenerator;rnimport org.jfree.chart.labels.StandardPieToolTipGenerator;rnimport org.jfree.chart.plot.CategoryPlot;rnimport org.jfree.chart.plot.PiePlot3D;rnimport org.jfree.chart.plot.PlotOrientation;rnimport org.jfree.chart.renderer.category.BarRenderer3D;rnimport org.jfree.data.category.DefaultCategoryDataset;rnimport org.jfree.util.Rotation;rnprivate JFreeChart createBarChart() rnDefaultCategoryDataset dataset = new DefaultCategoryDataset();rnrndataset.addValue(19.0, "S1", "C1");rndataset.addValue(14.0, "S1", "C2");rndataset.addValue(115.0, "S1", "C3");rndataset.addValue(114.0, "S1", "C4");rndataset.addValue(-15.0, "S2", "C1");rndataset.addValue(-17.0, "S2", "C2");rndataset.addValue(114.0, "S2", "C3");rndataset.addValue(-13.0, "S2", "C4");rndataset.addValue(16.0, "S3", "C1");rndataset.addValue(117.0, "S3", "C2");rndataset.addValue(-112.0, "S3", "C3");rndataset.addValue( 17.0, "S3", "C4");rndataset.addValue(17.0, "S4", "C1");rndataset.addValue(115.0, "S4", "C2");rndataset.addValue(111.0, "S4", "C3");rndataset.addValue(10.0, "S4", "C4");rndataset.addValue(-18.0, "S5", "C1");rndataset.addValue(-16.0, "S5", "C2");rndataset.addValue(110.0, "S5", "C3");rndataset.addValue(-19.0, "S5", "C4");rndataset.addValue(91.0, "S6", "C1");rndataset.addValue(81.0, "S6", "C2");rndataset.addValue(119.0, "S6", "C3");rndataset.addValue(16.0, "S6", "C4");rndataset.addValue(-110.0, "S7", "C1");rndataset.addValue(19.0, "S7", "C2");rndataset.addValue(17.0, "S7", "C3");rndataset.addValue(17.0, "S7", "C4");rndataset.addValue(11.0, "S8", "C1");rndataset.addValue(13.0, "S8", "C2");rndataset.addValue(19.0, "S8", "C3");rndataset.addValue(19.0, "S8", "C4");rndataset.addValue(-13.0, "S9", "C1");rndataset.addValue(7.0, "S9", "C2");rndataset.addValue(11.0, "S9", "C3");rndataset.addValue(-10.0, "S9", "C4");rnrn/**rndataset.addValue(100, "S9", "C1");rndataset.addValue(-100, "S9", "C2");rndataset.addValue(123, "S9", "C3");rndataset.addValue(343, "S9", "C4");rn*/rnJFreeChart chart = ChartFactory.createBarChart3D(rn"Bar Chart",rn"Category",rn"Value",rndataset,rnPlotOrientation.VERTICAL,rntrue,rntrue,rnfalsern);rnCategoryPlot plot = chart.getCategoryPlot();rnBarRenderer3D renderer = new BarRenderer3D();rnplot.setForegroundAlpha(0.6f);rnrenderer.setItemMargin(0.1);rnrnValueAxis rangeAxis = plot.getRangeAxis();rn//设置最高的一个 Item 与图片顶端的距离rnrangeAxis.setUpperMargin(0.15);rn//设置最低的一个 Item 与图片底端的距离rnrangeAxis.setLowerMargin(0.15);rnplot.setRangeAxis(rangeAxis);rnrnrenderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator());rnrenderer.setItemLabelsVisible(true);rnrnrnplot.setRenderer(renderer);rnrnreturn chart;rnrn为什么不显示数值
vs2010 chart 柱状图设置每一个柱的宽度都不同
在线等大神给点想法rn老师让用chart做一个柱状图,要求柱子的宽度代表一个属性,柱子间距也代表属性,我怎么才能做到每一个柱的宽度自己设定
owc11画柱状图如何在每个柱的上方显示数据?
谢谢!!!
owc画柱状图如何在每个柱的上方显示数据
owc画柱状图如何在每个柱的上方显示数据
为什么DataGrid数据的显示顺序不与数据库数据不一致
为什么DataGrid数据的显示顺序不与数据库中的数据顺序不一致,DataGrid数据的数据好象是按主关键字排过序的,怎么样才能使两者一致
使用Chart控件显示柱状图的问题
绑定数据:rn DataTable dt=ds.Tables[0];rn Chart1.DataSource=dt;rn Chart1.DataBind();rn Chart1.RenderType=RenderType.ImageTag;rn Chart1.Series[0].XValueMember="name";rn Chart1.Series[0].YValueMembers = "Pre";rn数据源如图:rn[img=http://img.my.csdn.net/uploads/201303/12/1363099032_3192.jpg][/img]rnrn我在测试的时候发现,如果y轴的数据是整数的话就能显示出柱状图,但是我现在的数据源里是百分比,Y轴就没数据了,rn[img=http://img.my.csdn.net/uploads/201303/12/1363099583_4747.png][/img][img=http://img.my.csdn.net/uploads/201303/12/1363099591_6801.png][/img]rnrnrn我的问题就是是百分比的时候能不能也显示出柱状图来。rn另外如果我数据用整数将图显示出来在图的顶部将百分比显示出来怎么弄。。。
WPF_Dev控件,chart 柱状图怎么横向显示?
如题:我横坐标是时间,纵坐标是数量。显示的纵向柱状图。。。怎么横向显示啊。
Extjs4.2 Chart柱状图
Extjs4.2 Chart柱状图实例。
jFree Chart学习-柱状图
前提要添加依赖的jar包,在你个pom.xml文件中添加如下依赖 1.第一个是jcommon<!-- https://mvnrepository.com/artifact/jfree/jcommon --> <dependency> <groupId>jfree</groupId> <artifactId>jcommon</artif
自绘柱状图线图Chart
自己在工作中写的个chart类,应该能复用,希望大家用的上, 可以通过设置扩展样式实现图表的定制,包括标题\柱状图\线状图\说明\背景色\前景色等
js chart js柱状图
js chart js柱状图 js配合数据 生成动态柱状图 包含源代码
hello chart——柱状图
先看一个例子: test.xml: FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> lecho.lib.hellocharts.v
Highstock Chart柱状图展示
Highstock Chart柱状图展示js文件
highcharts的柱状图显示数据
Highcharts图表上显示数据 默认情况highcharts柱形图上点击后才显示y数据。 添加plotOptions对应的属性plotOptions设置。 plotOptions :{ column: { pointPadding: 0.2, borderWidth: 0, dataLabels: { enabled: true //设置显示对应y的值 } } } 代码如下 va...
柱状图数据显示%
柱状图数据显示%
chart不显示数据
[img=https://img-bbs.csdn.net/upload/201606/07/1465273658_42701.png][/img]
C# chart 数据显示
我要弄一个chart,接收硬件发送的数据显示出来,要求:rn 1.曲线可以放大缩小;rn 2.可以显示marker点;rn我看了ms的代码,fastline好像可以,但是我不知道两个功能具体代码rn,请指教!rn
柱状图图标显示数据
https://code.hcharts.cn/demos/hhhhDz可以参考这个例子叠加柱状图
jfreechar 分组数据怎么 画柱状图 ,每组由多种数据
[img=https://img-bbs.csdn.net/upload/201312/25/1387936713_108837.jpg][/img]rn类似图上这种,怎么画呀,大神们,赐个例子吧
WPF 柱状图 堆积柱状图 Chart使用
WPF 柱状图 堆积柱状图 Chart使用,VS2010版 C# WPF Chart组件实现柱状图,线形图,等统计图表
textfield 显示“琤”字与系统不一致问题
在textfield中settext“琤”字 时显示“[img=https://img-bbs.csdn.net/upload/201402/17/1392608244_714421.jpg][/img]”字rn在windows xp 记事本中也是显示“[img=https://img-bbs.csdn.net/upload/201402/17/1392608244_714421.jpg][/img]”字。rnrnrn有些xp系统显示的是“琤”字,是不是与系统有关,如何能使的与系统一致。。rn
HashMap存入和取出的数据顺序不一致
package com.jsgx; import java.util.HashMap; import java.util.Map; public class Test { public static void main(String[] args) { Map&amp;lt;String,Integer&amp;gt; map = new HashMap&amp;lt;&amp;gt;(); map.put...
将chart柱状图保存为图片格式
带有弹出的保存页面,可以设置图片的名字,选择图片保存的格式private void ExportPicture(string fileName) { string saveFileName = ""; SaveFileDialog saveDialog = new SaveFileDialog(); saveDi
silverlight toolkit chart 柱状图的问题?
本人使用silverlight3.0 toolkit chart(2009年11月发布的版本) 开发柱状图报表,rn遇到以下几个问题rn1:数据是动态的,要动态在chart的Series上添加ColumnSeries,请问怎么设置ColumnSeries的鼠标超链?貌似找不到相关herf target等属性?能是实现在visifire组建中的3维柱状图效果?rn2:如何去掉silverlight最外层边框?即UserControl那层的框?使用BorderThickness设置吗?rn3:目前3.0版本提供打印功能吗?网上找的似乎都是只能页面打印?页面打印很多难处理的地方。rn4:目前3.0版本,图表数据,提供导出excel功能,我说的是图表,似乎silverlight3.0 toolkit 和 visifire都不能导出到excel有图表?rnrn以上问题能回答多少算,多少,谢谢,一定给分
为什么DataGrid数据的显示顺序不与数据库中的数据顺序不一致
为什么DataGrid数据的显示顺序不与数据库中的数据顺序不一致,DataGrid数据的数据好象是按主关键字排过序的,怎么样才能使两者一致rn
ext4.0绘制chart(柱状图,条形图)
 &amp;lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;utf-8&quot;%&amp;gt; &amp;lt;% String path = request.getContextPath(); String basePath = request.getScheme()+&quot;://&quot;+request.getServerName()+&quot
iOS开发 图表Chart 折线图、柱状图
iOS开发 图表Chart 折线图、柱状图
c# chart输出柱状图的表头
[img=https://img-bbs.csdn.net/upload/201605/25/1464181280_876693.jpg][/img]这个表头可以手动输入吗,this.chart1.Titles.Add("")这个好像不符合要求,有其他方法吗
CListCtrl插入图片后显示顺序与实际顺序不一致
如题,CListCtrl与CImageList绑定,CLIstCtrl的模式为icon,调用insertItem()函数插入行以显示图片和文字。 rnrn在同一个函数内插入显示图片时,插入的图片可以按照插入的顺序显示。 rn但不同函数之间插入图片时,插入的图片只能在列表的最后显示,且列表内文字和图片的顺序是正确的。rn也就是窗口显示的图片列表的顺序与列表实际的顺序不一致。rn求大神指点一下怎么样才能让窗口显示的图片顺序与列表内实际的顺序一致~ rn
用Chart来显示数据
我有一个表,要求用Chart来显示数据,不能用DBChatr等数据敏感控件,高手帮帮忙好吗?我是想用横轴线显示24小时,竖轴线用曲线显示每小时的数据量,我该怎么写代码?谢谢啦,帮个忙!!
Chart 如何显示大量数据
今天往一个Chart添加 60个数据,还能看到基本的线rnrn下面这个图就没事rn[img=https://img-bbs.csdn.net/upload/201312/25/1387953176_455552.png][/img]rnrnrn如果数据多了,就成下面这个图了rn[img=https://img-bbs.csdn.net/upload/201312/25/1387953153_257083.png][/img]rnrnrn请问大家有办法吗?小弟新手,第一次弄这个Chartrnrn
关于chart显示数据的问题??
小弟要用Chart显示数据rn :X轴显示时间rn :Y轴显示数据rn要求:每个点(x,y)要连接成曲线rn (x,y)值是不断变化的,每隔10秒数值变化一次,我想通过CHART图以曲线的形式反映出来,rn 搞了两天没搞定,妄各位大虾指点。
OWC柱状图如何显示数据?
在.net生成了owc柱状图以后 希望让每个柱状图上面都可以显示对应的数据,应该怎么设置啊?
用CHART显示数据的问题
一组数,可能是几十个,也可能是几千,或几万个rnrn怎么在chart里显示成灰度图一样的图呢?郁闷死了。数据大了,显示起来慢死了。不知道怎么才能快点。
柱状图normal数据显示重写
series: [ { name: '直接访问', type: 'bar', stack: '总量', label: { normal: { show: true, positi
柱状图数据0不显示
柱状图数据0不显示
相关热词 c# 线程结束时执行 c# kb mb 图片 c# 替换第几位字符 c#项目决定成败 c# 与matlab c# xml缩进 c#传感器基础 c#操作wps c# md5使用方法 c# 引用父窗口的组件