通过数据源生成图表

收藏

本帖最后由 ClarkPan 于 2020-5-5 15:37 编辑

SpreadJS在V11的版本中添加了对图表的支持功能，SpreadJS中的图表功能是与Excel一样都是基于电子表格中的数据来生成的图表，生成图表的数据会根据引用数据的变化而变化，而且可以支持Excel的公式计算。但是在日常开发中我们往往遇到直接引用数据库的数据源这种通过数据源引入来生成图表的需求，这种在一般chart图表控件中常见的需求，SpreadJS也可以通过一些技巧来实现。首先将我们查到的数据设置在一个sheet上面，就像下面这样↓
image.png836883239.png

之后我们在另一个sheet上插入图表，并将数据引用指向刚才我们设置的这个sheet上的对应区域

var sheet2 = new GC.Spread.Sheets.Worksheet('Sheet2');
spread.addSheet(0, sheet);
var chart = sheet2.charts.add("chart1",GC.Spread.Sheets.Charts.ChartType.line,500,100,400,200);
var seriesItem = {};
seriesItem.name = "Sheet1!$B$1";
seriesItem.xValues = "Sheet1!$A$2:$A$8";
seriesItem.yValues = "Sheet1!$B$2:$B$8";
chart.series().add(seriesItem);

复制代码

生成如下的图表↓

最后我们再将存放有数据的sheet隐藏掉，我们的图表就完成了，数据源不会显示在页面上

sheet.visible(false);

复制代码

这里有同学可能会问，隐藏和显示sheet的操作在菜单上可以执行，那么如果用户在菜单上将存有数据的sheet显示了出来，那就达不到想要的效果了，该怎么办？
对于这样的问题，这里提供以下几种思路：我们可以在右键菜单弹出是加入判断进行干预，思路有很多种，比如我们可以重写右键菜单中的显示和隐藏，在其中加入对该隐藏sheet的判断，判断显示菜单弹出的时候排除掉这个sheet。也可以在onOpenMenu中进行判断，然后filter一个不包含显示隐藏的菜单进行显示。甚至我们可以更加粗暴点，直接将显示/隐藏从菜单中去掉。

		自动登录	找回密码
密码			立即注册

通过数据源生成图表

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄