go-charts icon indicating copy to clipboard operation
go-charts copied to clipboard
verified publisher icon vicanso

x 轴的 SplitNumber 使用报错

Open Nanakoww opened this issue 3 years ago • 16 comments

生成的图片x轴太挤了，想调整一下显示的样式，如图 企业微信截图_d6a6d386-d3d1-488e-a7ff-004e67bac8a2

但是在设置SplitNumber为任何值，都会报错，如图 image

以下是我的代码：

x := []string{
	"18:49:20",
	"18:49:25",
	"18:49:30",
	"18:49:35",
	"18:49:40",
	"18:49:45",
	"18:49:50",
	"18:49:55",
	"18:50:00",
	"18:50:05",
	"18:50:10",
	"18:50:15",
	"18:50:20",
	"18:50:25",
	"18:50:30",
}

y := [][]float64{
	{
		0,
		0,
		78.47169811320752,
		45.459999999999994,
		44.04,
		44.2,
		44.42,
		44.68,
		44.12,
		43.29,
		43.23,
		43.05,
		42.88,
		45.15,
		0,
	},
}

unit := "ms"
p, err := charts.LineRender(
	y,
	charts.TitleTextOptionFunc("Error request"),
	charts.XAxisDataOptionFunc(x),
	charts.XAxisOptionFunc(charts.XAxisOption{SplitNumber: 3}),
	charts.ThemeOptionFunc("light"),
	charts.WidthOptionFunc(1200),
	charts.HeightOptionFunc(400),
	charts.YAxisOptionFunc(charts.YAxisOption{Formatter: "{value}" + unit}),
	charts.LegendLabelsOptionFunc([]string{
		"Average",
		"90th Percentile",
		"95th Percentile",
		"99th Percentile",
		"Max",
	},
	charts.PositionRight),
)

另外 y 轴可以提供填充颜色的参数吗，类似于下图 企业微信截图_1c65900b-190e-4b2e-a286-425b3f09718a

Nanakoww avatar Jul 08 '22 07:07 Nanakoww

@nanagan XAxisOptionFunc 如果需要设置，那要把完整的属性都设置一下，如果仅一个属性，使用以下形式：

// charts.XAxisOptionFunc(charts.XAxisOption{SplitNumber: 3}),
		func(opt *charts.ChartOption) {
			opt.XAxis.SplitNumber = 3
		},

vicanso avatar Jul 08 '22 13:07 vicanso

@nanagan XAxisOptionFunc 如果需要设置，那要把完整的属性都设置一下，如果仅一个属性，使用以下形式：

// charts.XAxisOptionFunc(charts.XAxisOption{SplitNumber: 3}),
		func(opt *charts.ChartOption) {
			opt.XAxis.SplitNumber = 3
		},

我尝试了一下，这个参数设置为13以下就失效了，生成出来的图像都没有太大变化，这是为什么呢？ 另外，如果单独设置 BoundaryGap 这个参数，也是失效的，不管设置成true还是false，x轴的数据点一直展示在两个刻度中间。 下面是代码：

        x := "18:44:10 18:44:15 18:44:20 18:44:25 18:44:30 18:44:35 18:44:40 18:44:45 18:44:50 18:44:55 18:45:00 18:45:05 18:45:10 18:45:15 18:45:20 18:45:25 18:45:30 18:45:35 18:45:40 18:45:45 18:45:50 18:45:55 18:46:00 18:46:05 18:46:10 18:46:15 18:46:20 18:46:25 18:46:30 18:46:35 18:46:40 18:46:45 18:46:50 18:46:55 18:47:00 18:47:05 18:47:10 18:47:15 18:47:20 18:47:25 18:47:30 18:47:35 18:47:40 18:47:45 18:47:50 18:47:55 18:48:00 18:48:05 18:48:10 18:48:15 18:48:20 18:48:25 18:48:30 18:48:35 18:48:40 18:48:45 18:48:50 18:48:55 18:49:00 18:49:05 18:49:10 18:49:15 18:49:20"

	valueX := strings.Split(x, " ")
	valueY := [][]float64{
		{
			0,
			0,
			12046.8,
			50940.4,
			64277.6,
			69571.2,
			72629.4,
			66802,
			75399.8,
			65165,
			70525,
			73513.4,
			68959.8,
			68037,
			70576.6,
			65701.2,
			71732.2,
			68568.4,
			69133,
			67981.8,
			62586.8,
			70843.8,
			63619.4,
			64814.2,
			70443,
			70087.4,
			70710.4,
			73406,
			68357.2,
			71322.4,
			64685.8,
			65596,
			75884.6,
			71428.4,
			60309,
			69036,
			73502.4,
			68335.2,
			65319.2,
			66490.2,
			67470.4,
			69440.6,
			64983.2,
			69458.2,
			69676.8,
			61542.4,
			64884,
			75708.6,
			65860.2,
			67289.6,
			71214,
			71063.2,
			71760,
			65326.8,
			74354.2,
			58777.4,
			73552.6,
			67964,
			66412.6,
			73250.6,
			69759.2,
			67226,
			16999.4,
		},
	}

	f := false
	p, err := charts.LineRender(
		valueY,
		charts.TitleTextOptionFunc("Error request"),
		charts.XAxisDataOptionFunc(valueX),
		func(opt *charts.ChartOption) {
			opt.XAxis.SplitNumber = 5
			opt.XAxis.BoundaryGap = &f
		},
		charts.ThemeOptionFunc("light"),
		charts.WidthOptionFunc(1200),
		charts.HeightOptionFunc(600),
	)

Nanakoww avatar Jul 11 '22 07:07 Nanakoww

axis 的展示会根据文本宽度自动选择合适的值，如果需要设置SplitNumber，只能比自适应的值更大才有效果。还有BoundaryGap这个设置失效的是指你上面的代码吗？上面的代码我试了一下，数据点不是居中喔。

image

vicanso avatar Jul 11 '22 12:07 vicanso

axis 的展示会根据文本宽度自动选择合适的值，如果需要设置SplitNumber，只能比自适应的值更大才有效果。还有BoundaryGap这个设置失效的是指你上面的代码吗？上面的代码我试了一下，数据点不是居中喔。

image

图上的18:44:25不是居在两个刻度中间吗？

我以为的不居中的情况是下图 image

Nanakoww avatar Jul 11 '22 12:07 Nanakoww

是的，你说的对的。点与label都应该靠左。

vicanso avatar Jul 11 '22 12:07 vicanso

使用main分支的最新代码尝试一下，已调整

vicanso avatar Jul 11 '22 12:07 vicanso

@nanagan 我发版2.0.5版本了，尝试一下

vicanso avatar Jul 12 '22 13:07 vicanso

@nanagan 我发版2.0.5版本了，尝试一下

抱歉最近比较忙，刚刚测试了一下，Boundary gap的设置符合预期，SplitNumber 设置在数据点比较少（比如6个点）的时候会失效，代码如下：

x := "18:44:25 18:44:30 18:44:35 18:44:40 18:44:45 18:44:50"

	valueX := strings.Split(x, " ")
	valueY := [][]float64{
		{
			0,
			0,
			12046.8,
			50940.4,
			64277.6,
			69571.2,
		},
		{
			72629.4,
			66802,
			75399.8,
			65165,
			70525,
			73513.4,
		},
		{
			68959.8,
			68037,
			70576.6,
			65701.2,
			71732.2,
			68568.4,
		},
		{
			69133,
			67981.8,
			62586.8,
			70843.8,
			63619.4,
			64814.2,
		},
		{
			70443,
			70087.4,
			70710.4,
			73406,
			68357.2,
			71322.4,
		},
		{
			64685.8,
			65596,
			75884.6,
			71428.4,
			60309,
			69036,
		},
		{
			73502.4,
			68335.2,
			65319.2,
			66490.2,
			67470.4,
			69440.6,
		},
		{
			64983.2,
			69458.2,
			69676.8,
			61542.4,
			64884,
			75708.6,
		},
		{
			65860.2,
			67289.6,
			71214,
			71063.2,
			71760,
			65326.8,
		},
		{
			74354.2,
			58777.4,
			73552.6,
			67964,
			66412.6,
			73250.6,
		},
		{
			29395,
			84639,
			63559,
			69572,
			93752,
			47930,
		},
	}

	f := false
	p, err := charts.LineRender(
		valueY,
		charts.TitleTextOptionFunc("Error request"),
		charts.XAxisDataOptionFunc(valueX),
		func(opt *charts.ChartOption) {
                         opt.XAxis.SplitNumber = 10
			opt.XAxis.BoundaryGap = &f
		},
		charts.ThemeOptionFunc("light"),
		charts.WidthOptionFunc(1200),
		charts.HeightOptionFunc(600),
		charts.PaddingOptionFunc(charts.Box{Top: 50, Left: 50, Right: 50, Bottom: 50}),
		charts.LegendLabelsOptionFunc([]string{
			"group 1",
			"group 2",
			"group 3",
			"group 4",
			"group 5",
			"group 6",
			"group 7",
			"group 8",
			"group 9",
			"group 10",
			"group 11",
		},
		charts.PositionCenter),
	)

不加 SplitNumber 生成的图为： image

加了 SplitNumber ，值从0-20都测了一遍，生成的图都是： image

如果是很多的数据点，SplitNumber 的设置不总是符合预期，用63个点的曲线测试了一下，测试代码如下：

x := "18:44:10 18:44:15 18:44:20 18:44:25 18:44:30 18:44:35 18:44:40 18:44:45 18:44:50 18:44:55 18:45:00 18:45:05 18:45:10 18:45:15 18:45:20 18:45:25 18:45:30 18:45:35 18:45:40 18:45:45 18:45:50 18:45:55 18:46:00 18:46:05 18:46:10 18:46:15 18:46:20 18:46:25 18:46:30 18:46:35 18:46:40 18:46:45 18:46:50 18:46:55 18:47:00 18:47:05 18:47:10 18:47:15 18:47:20 18:47:25 18:47:30 18:47:35 18:47:40 18:47:45 18:47:50 18:47:55 18:48:00 18:48:05 18:48:10 18:48:15 18:48:20 18:48:25 18:48:30 18:48:35 18:48:40 18:48:45 18:48:50 18:48:55 18:49:00 18:49:05 18:49:10 18:49:15 18:49:20"

	valueX := strings.Split(x, " ")
	valueY := [][]float64{
		{
			0,
			0,
			12046.8,
			50940.4,
			64277.6,
			69571.2,
			72629.4,
			66802,
			75399.8,
			65165,
			70525,
			73513.4,
			68959.8,
			68037,
			70576.6,
			65701.2,
			71732.2,
			68568.4,
			69133,
			67981.8,
			62586.8,
			70843.8,
			63619.4,
			64814.2,
			70443,
			70087.4,
			70710.4,
			73406,
			68357.2,
			71322.4,
			64685.8,
			65596,
			75884.6,
			71428.4,
			60309,
			69036,
			73502.4,
			68335.2,
			65319.2,
			66490.2,
			67470.4,
			69440.6,
			64983.2,
			69458.2,
			69676.8,
			61542.4,
			64884,
			75708.6,
			65860.2,
			67289.6,
			71214,
			71063.2,
			71760,
			65326.8,
			74354.2,
			58777.4,
			73552.6,
			67964,
			66412.6,
			73250.6,
			69759.2,
			67226,
			16999.4,
		},
		{
			61542.4,
			64884,
			75708.6,
			65860.2,
			67289.6,
			71214,
			71063.2,
			71760,
			65326.8,
			74354.2,
			58777.4,
			73552.6,
			67964,
			66412.6,
			73250.6,
			69759.2,
			67226,
			16999.4,
			0,
			0,
			12046.8,
			50940.4,
			64277.6,
			69571.2,
			72629.4,
			66802,
			75399.8,
			65165,
			70525,
			73513.4,
			68959.8,
			68037,
			70576.6,
			65701.2,
			71732.2,
			68568.4,
			69133,
			67981.8,
			62586.8,
			70843.8,
			63619.4,
			64814.2,
			70443,
			70087.4,
			70710.4,
			73406,
			68357.2,
			71322.4,
			64685.8,
			65596,
			75884.6,
			71428.4,
			60309,
			69036,
			73502.4,
			68335.2,
			65319.2,
			66490.2,
			67470.4,
			69440.6,
			64983.2,
			69458.2,
			69676.8,
		},
	}

	f := false
	p, err := charts.LineRender(
		valueY,
		charts.TitleTextOptionFunc("Error request"),
		charts.XAxisDataOptionFunc(valueX),
		func(opt *charts.ChartOption) {
			opt.XAxis.SplitNumber = 12
			opt.XAxis.BoundaryGap = &f
		},
		charts.ThemeOptionFunc("light"),
		charts.WidthOptionFunc(1200),
		charts.HeightOptionFunc(600),
		charts.PaddingOptionFunc(charts.Box{Top: 50, Left: 50, Right: 50, Bottom: 50}),
		charts.LegendLabelsOptionFunc([]string{
			"group 1",
			"group 2",
			"group 3",
			"group 4",
			"group 5",
			"group 6",
			"group 7",
			"group 8",
			"group 9",
			"group 10",
			"group 11",
		},
		charts.PositionCenter),
	)

不设置 SplitNumber 的时候生成的图，x轴是9个数据点： image

设置 SplitNumber 为 0-12，生成的图和上面一样，x轴是9个数据点；

设置 SplitNumber 为 13-15，生成的图的x轴是13个数据点： image

设置 SplitNumber 为16-20，生成的图的x轴是16个数据点： image

SplitNumber的值为 21 -62，生成的图如下，x轴有21个数据点： image

SplitNumber的值为 63，生成的图如下： image

这个变化似乎没什么规律，但是目前的功能已经满足了我的使用场景，这个测试只是分享一下我的发现。

Nanakoww avatar Jul 18 '22 08:07 Nanakoww

SplitNumber 只是一个期望值，显示的时候会先根据文本计算对应的宽度，计算合适的split number，再与设置的SplitNumber对比，取最大值。

vicanso avatar Jul 18 '22 11:07 vicanso

突然发现作者增加了LineStrokeWidth这个设置，非常感恩，非常需要这个设置！以及期待一下可以设置曲线填色的参数 image

Nanakoww avatar Aug 23 '22 08:08 Nanakoww

是指你图片的效果吗？

vicanso avatar Aug 24 '22 00:08 vicanso

是指你图片的效果吗？

对的，就上面那张图那种可以填成蓝色的效果，加油加油 image

Nanakoww avatar Aug 24 '22 02:08 Nanakoww

下面的效果是否能满足需求？ area-line-chart

vicanso avatar Aug 25 '22 12:08 vicanso

下面的效果是否能满足需求？ area-line-chart

非常可以满足 image

Nanakoww avatar Sep 01 '22 07:09 Nanakoww

@nanagan 之前是你询问需要自定义线条的颜色吗？可以使用AddTheme自定义自己的主题颜色或者覆盖原来主题

vicanso avatar Sep 01 '22 12:09 vicanso

@nanagan 之前是你询问需要自定义线条的颜色吗？可以使用AddTheme自定义自己的主题颜色或者覆盖原来主题

我有问过，我尝试一下～

Nanakoww avatar Sep 02 '22 02:09 Nanakoww