spreadJs v16.1.4 跨行设置折线图表

收藏

本帖最后由 Joestar.Xu 于 2023-8-14 15:25 编辑

image.png431100463.png

正常的设置折线图是sheet.charts.add('line', GC.Spread.Sheets.Charts.ChartType.line, 0, 100, 400, 300, '指数!A1:C100')。
但是有一列数据是跨列了这种情况如何设置，如图红色框的区域要获取A、B和F行的数据设置折线图

Richard.Huang · Richard.Huang

您好，目前sheet.charts.add()无法创建非连续的区域的图表，您可以通过series().add方法来实现您的需求：
// 创建第一片区域的chart图表
var dataRange = "A:C";
var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.line, 250, 20, 600, 400, dataRange);

// 将F列数据添加进图表中
chart.series().add({
chartType: GC.Spread.Sheets.Charts.ChartType.line,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
backColor: {
color: "lightblue",
width: 2
},
xValues: "A:A",
yValues: "F:F"
});

想念 · 想念

本帖最后由想念于 2023-8-14 17:11 编辑

Richard.Huang 发表于 2023-8-14 15:36
您好，目前sheet.charts.add()无法创建非连续的区域的图表，您可以通过series().add方法来实现您的需求：
...

问题1：

chart.series().add添加的那条数据的名称叫Series3，而不是像前两条数据一样以当前列的第一个单元格里的值为名称呢 image.png235173033.png

问题2：
能隐藏或者去掉中间的这条直线吗 image.png364119567.png

Richard.Huang · Richard.Huang

1. 可以通过axes来控制水平轴的颜色，从而达到隐藏的目的
let chart = sheet.charts.all()[0];
let axes = chart.axes();
axes.primaryCategory.lineStyle.color = '';
chart.axes(axes);

2. 您好，名字可以在添加series的时候一起指定，抱歉之前没有给您写完整：
// 将F列数据添加进图表中
chart.series().add({
chartType: GC.Spread.Sheets.Charts.ChartType.line,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
backColor: {
color: "lightblue",
width: 2
},
xValues: "A:A",
yValues: "F:F",
name: "Sheet1!$F$1",
});

最后，抱歉回复有点晚了

想念 · 想念

Richard.Huang 发表于 2023-8-15 09:39
1. 可以通过axes来控制水平轴的颜色，从而达到隐藏的目的
let chart = sheet.charts.all()[0];
let axes ...

通过axes来控制水平轴的颜色，从而达到隐藏的目的，我这样设置的没有生效

image.png945647888.png

，是不可以这样设置吗

Richard.Huang · Richard.Huang

您好，我成功按照设置lineStyle.color的方式隐藏了水平坐标轴，您查看一下我的代码，根据您的图片无法分析出您不成功的原因是什么，希望能提供一个可供我们复现的demo

想念 · 想念

本帖最后由想念于 2023-8-15 12:53 编辑

Richard.Huang 发表于 2023-8-15 10:48
您好，我成功按照设置lineStyle.color的方式隐藏了水平坐标轴，您查看一下我的代码，根据您的图片无法分析 ...

已上传完整代码

这个位置是设置图表的

Richard.Huang · Richard.Huang

您好，详细分析了您的代码以及数据文件，发现其实通过lineStyle.color的方式隐藏了水平坐标轴的方法是成功生效的，之所以您会看到中间有颜色的线，主要问题还是出在添加额外的一列这个操作上出了问题，对于增加一列数据的操作需要对y值进行范围框定，而不能简单地直接进行一列的添加操作，因为整个一列数据的后半部分是大量的空的单元格，会对chart的绘制造成问题

，

看了您的数据，我对添加一条折线的操作进行了更改：
// 将列数据添加进图表中
chart.series().add({
chartType: GC.Spread.Sheets.Charts.ChartType.line,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
name: "指数!$" + indexName + "$1",
xValues: "指数!A2:A213",
yValues: "指数!" + indexName + "2:" + indexName + "213",
});
chart.title({
text: ''
})

想念 · 想念

Richard.Huang 发表于 2023-8-15 17:40
您好，详细分析了您的代码以及数据文件，发现其实通过lineStyle.color的方式隐藏了水平坐标轴的方法是成功 ...

Richard.Huang · Richard.Huang

那就先结贴了，后续有其他问题的话随时开贴提问哈。

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

[已处理] spreadJs v16.1.4 跨行设置折线图表

9 个回复

SpreadJS 认证

SpreadJS 高级认证