go-echarts x 轴标签显示不全
文章目录
- 1.简介
- 2.官方示例
- 3.X 轴标签显示不全
- 4.解决办法
- 5.标签继续变长遇到的问题
- 6.小结
- 参考文献
1.简介
go-echarts 是 Go 中将数据绘制成各种图表的开源库,是 Apache Echarts 的 Go 版接口,用来控制生成 Apache Echarts 图表。
在 GitHub 上,它有超过 4K 颗星,使其成为 Go 中生成图表的最受欢迎的库之一。
2.官方示例
我想将自己的数据生成一个折线图。参考官方示例代码 go-echarts/examples,其中生成折线图的在 examples/line.go。这里以生成带有最小值,平均值与最大值的折线图为例,其官方示例代码如下。
package examplesimport ("io""math/rand""os""github.com/go-echarts/go-echarts/v2/charts""github.com/go-echarts/go-echarts/v2/components""github.com/go-echarts/go-echarts/v2/opts"
)var (itemCntLine = 6fruits = []string{"Apple", "Banana", "Peach ", "Lemon", "Pear", "Cherry"}
)func generateLineItems() []opts.LineData {items := make([]opts.LineData, 0)for i := 0; i < itemCntLine; i++ {items = append(items, opts.LineData{Value: rand.Intn(300)})}return items
}func lineMarkPoint() *charts.Line {line := charts.NewLine()line.SetGlobalOptions(charts.WithTitleOpts(opts.Title{Title: "markpoint options",}),)line.SetXAxis(fruits).AddSeries("Category A", generateLineItems()).SetSeriesOptions(charts.WithMarkPointNameTypeItemOpts(opts.MarkPointNameTypeItem{Name: "Maximum", Type: "max"},opts.MarkPointNameTypeItem{Name: "Average", Type: "average"},opts.MarkPointNameTypeItem{Name: "Minimum", Type: "min"},),charts.WithMarkPointStyleOpts(opts.MarkPointStyle{Label: &opts.Label{Show: true}}),)return line
}type LineExamples struct{}func (LineExamples) Examples() {page := components.NewPage()page.AddCharts(lineMarkPoint(),)f, err := os.Create("examples/html/line.html")if err != nil {panic(err)}page.Render(io.MultiWriter(f))
}
其中 lineMarkPoint() 根据给定的数据设置 X 轴和 Y 轴后,以及折线图的相关属性后,返回折线图对象。然后通过 components.Page 以 HTML 文件的形式渲染生出一个折线图。
我们调用官方的示例生成对应的折线图。
package mainimport ("github.com/go-echarts/examples/examples"
)func main() {var line examples.LineExamplesline.Examples()
}
运行程序,打开生成的 HTML 文件,看到的折线图如下。
3.X 轴标签显示不全
我把官方的示例代码拷贝到本地,把 X 轴的标签替换成自己数据对应的标签,是日期格式,数量是十个。
var (fruits = []string{"2022-03-01", "2022-03-02", "2022-03-03", "2022-03-04", "2022-03-05", "2022-03-06", "2022-03-07", "2022-03-08", "2022-03-09", "2022-03-10"}itemCntLine = len(fruits)
)
Y 轴数据依旧随机产生,生成折线图的代码不变,渲染后的效果如下。
可以看到 Y 轴的数据是十个,数量没有问题,但是 X 轴的日期没有全部显示,而是间隔一个来显示。
为什么会这样呢?原因是标签数量太多,太长,横着显示会出现重叠,go-echarts 自动优化,做了部分展示。
4.解决办法
我们在官方包中找到了用于描述轴标签的一个类型 type AxisLabel ,其中有个属性 Interval 的注释中说了如何显示所有的的轴标签。
type AxisLabel struct {// Set this to false to prevent the axis label from appearing.Show bool `json:"show,omitempty"`// Interval of Axis label, which is available in category axis.// It uses a strategy that labels do not overlap by default.// You may set it to be 0 to display all labels compulsively.// If it is set to be 1, it means that labels are shown once after one label.// And if it is set to be 2, it means labels are shown once after two labels, and so on.Interval string `json:"interval,omitempty"`...
}
按照说明,我们将 AxisLabel 的属性 Interval 设置成 “0”。
func lineMarkPoint() *charts.Line {line := charts.NewLine()line.SetGlobalOptions(charts.WithTitleOpts(opts.Title{Title: "markpoint options",}),// 这个是我新加的用户设置轴标签的属性。charts.WithXAxisOpts(opts.XAxis{AxisLabel: &opts.AxisLabel{Interval: "0",},}),)line.SetXAxis(fruits).AddSeries("Category A", generateLineItems()).SetSeriesOptions(charts.WithMarkPointNameTypeItemOpts(opts.MarkPointNameTypeItem{Name: "Maximum", Type: "max"},opts.MarkPointNameTypeItem{Name: "Average", Type: "average"},opts.MarkPointNameTypeItem{Name: "Minimum", Type: "min"},),charts.WithMarkPointStyleOpts(opts.MarkPointStyle{Label: &opts.Label{Show: true}}),)return line
}
渲染后的结果如下。
这下倒好了,X 轴标签一个都不显示了。猜测是因为显示设置 X 轴标签的相关属性,但是其他属性有没有设置,导致不显示了。这里吐槽一下,都已经显示给了轴标签,为什么默认显示呢?
我们将 AxisLabel.Show 置为 true 再试下。
```go
func lineMarkPoint() *charts.Line {line := charts.NewLine()line.SetGlobalOptions(charts.WithTitleOpts(opts.Title{Title: "markpoint options",}),// 这个是我新加的用户设置轴标签的属性。charts.WithXAxisOpts(opts.XAxis{AxisLabel: &opts.AxisLabel{Show: true,Interval: "0",},}),)...
}
渲染后的结果如下:
不出所料,X 轴标签出现了重叠,没法看。看外,还发现了一个问题,首尾两个标签没有展示。
我们继续看下 type AxisLabel 的相关属性,肯定是因为我没有将相关的属性设置好。果不其然,其中有三个属性与上面遇到的两个问题有直接的关系。
type AxisLabel struct {...// Rotation degree of axis label, which is especially useful when there is no enough space for category axis.// Rotation degree is from -90 to 90.Rotate float64 `json:"rotate,omitempty"`...ShowMinLabel bool `json:"showMinLabel"`ShowMaxLabel bool `json:"showMaxLabel"`...
}
其中 Rotate 可以控制标签旋转的角度,来解决重叠的问题。注意,其是旋转的方向是逆时针旋转。比如正值 30 表示逆时针旋转 30 度。这里我又要吐槽一下,为什么不用正值表示顺时针,负值表示逆时针呢?这样不是更符合人们的认知习惯吗?
还有两个属性 ShowMinLabel 和 ShowMaxLabel 用于控制首尾标签是否显示,如果需要显示首位标签,需要将其置为 true。我可能没有 get 到 go-echarts 的精妙设计之处,将这两个字段设计成默认为 true 不是更好吗?
几经波折,下面是最终的轴坐标属性的设置。
charts.WithXAxisOpts(opts.XAxis{AxisLabel: &opts.AxisLabel{Show: true,Interval: "0",Rotate: 30,ShowMinLabel: true,ShowMaxLabel: true,},
})
最后的展示效果如下:
5.标签继续变长遇到的问题
如果我的 X 轴标签继续变长,比如我在日期后面加上了时间。
var (fruits = []string{"2022-03-01 01:02:03", "2022-03-02 01:02:03", "2022-03-03 01:02:03","2022-03-04 01:02:03", "2022-03-05 01:02:03", "2022-03-06 01:02:03","2022-03-07 01:02:03", "2022-03-08 01:02:03", "2022-03-09 01:02:03","2022-03-10 01:02:03"}itemCntLine = len(fruits)
)
还是按照上面的代码来生成,会出现下面标签被裁切显示不全的情况。
从上图中,可以直观地看到原因,是因为标签栏的高度不够,导致了标签被裁切。如何解决这个问题?
我们继续回到轴标签类型 type AxisLabel ,看看有没有相关的属性来控制标签栏的高度。绝望的是,并没有发现相关的属性。
实际上,go-echarts 是 Apache ECharts 的客户端库。其相关的设置,实际上是用来控制生成 Apache ECharts,相关的属性也都能在 Apache ECharts 中找到。
其中 ECharts 有个 grid 属性可以用来控制图表距离容器的左边距离和底部距离。
grid: {left: '10%',bottom:'35%'
}
不过目前在 go-echarts 中并没有找到如何设置 grid,可能目前还不支持。
这里就先减小旋转的角度和字体大小来间接解决遮挡的问题。
charts.WithXAxisOpts(opts.XAxis{AxisLabel: &opts.AxisLabel{Show: true,Interval: "0",Rotate: 20, // 减小旋转角度ShowMinLabel: true,ShowMaxLabel: true,FontSize: "10", // 减小标签字体大小},})
效果如下:
6.小结
本文简单记录了通过 go-echarts 生成折线图时遇到的相关问题并给出了对应的解决办法。
其中 x 轴标签显示不全,是因为标签数量太多,太长,横着显示会出现重叠,go-echarts 做了自动优化只展示部分标签。我们可以通过显示设置轴标签 相关属性 type AxisLabel 的相关属性来控制其展现形式。
比较关键的两个属性是:
- AxisLabel.Interval 控制展示间隔,0 表示展示全部。
- AxisLabel.Rotate 旋转角度,取值范围是 -90 ~ 90,正值表示逆时针,负值表示顺时针。
如果 x 轴标签显示全部和旋转后,被遮挡,是因为图表底部距离容器的距离不够,可以通过 Grid 属性来设置。但是目前 go-echarts 貌似还不支持设置 Grid。可以通过减小旋转角度和字体大小间接让被遮挡的标签显示出来。
关于 go-echarts 更多的用法和使用问题,如果有机会,后面会继续更新。希望大家能够参照官方代码和文档,做到举一反三,能够顺利解决自己遇到的问题。
参考文献
Apache ECharts
Apache ECharts option
go-echarts - pkg.go.dev
go-echarts opts - go.pkg.dev
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
go-echarts x 轴标签显示不全相关推荐
- ECharts图表坐标轴数据超出显示范围,以及坐标轴刻度标签显示不全解决方法
1.在使用ECharts图表时,比较常见到坐标轴数据超出显示范围的情况,如下 解决办法:添加配置 2.坐标轴刻度标签显示不全 就简单描述一下,比如你的数据横坐标有15个,但是默认不会显示全部 解决方法 ...
- ECharts X 轴标签过长导致文字重叠的 4 种解决方案
目录 方法一:Echarts X 轴 标签倾斜摆放 方法二:Echarts X 轴 限制每行字数,换行显示 方法三:Echarts X 轴 垂直竖显文字 方法四:Echarts X 轴 隔行显示 使用 ...
- python 横坐标只显示部分数据_解决echarts中横坐标值显示不全(自动隐藏)问题
echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整. 如下图,当横轴时间为13天时,echarts会自动隔天显示 如果我们想显示全,则需要在xAxi ...
- R语言ggplot2可视化数据点注释、标签显示不全、发生边界截断问题解决实战
R语言ggplot2可视化数据点注释.标签显示不全.发生边界截断问题解决实战 目录 R语言ggplot2
- 解决 MSChart控件 X轴坐标显示不全的问题
前一阵子做开发用到微软的MSChart控件,功能虽然强大,但是从来没用过,一直处在摸索之中,一个小问题花了半天时间去研究.终于把X轴坐标显示不全的问题给解决了,当然也在网上找了很多的资料才搞定的,今天 ...
- echarts中横坐标值显示不全(自动隐藏)解决方案
echarts中横坐标值显示不全自动隐藏解决方案 echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整. 如下图,当横轴数据过多时,echarts会自 ...
- matplotlib 设置标注方向_matplotlib y轴标注显示不全以及subplot调整的问题
matplotlib y轴标注显示不全以及subplot调整的问题 问题: 我想在y轴显示的标注太长,想把它变成两行显示,发现生成的图形只显示的第二行的字,把第一行的字挤出去了 想要的是显示两行这样子 ...
- echarty轴自定义显示不全,ECharts图表X轴或者Y轴单位内容显示不全
现在出现的问题是X轴单位内容显示不全 主要代码如下:xAxis中的name为"时长(min)",但上图只显示了"时" grid: { left: '3%', r ...
- Echarts图X轴文字显示不全
一文学会集成Ecahrts图表 目录 一.问题 二.解決 三.其他原因 一.问题 x轴文字比较长 ,而且逆时针45度旋转显示,只显示一部分字体,这里可以通过调节与容器的距离解决这种问题 二.解決 gr ...
最新文章
- 依赖倒转原则(Dependency Inversion Principle,DIP)
- 福布斯:2022年计算机视觉领域五大发展趋势
- hbase 数据的导入导出
- JAVA操作MYSQL数据库
- GraphPad Prism 平均值的标准误差
- 有道翻译与VS2010滚动栏自动反弹冲突问题
- matlab皮尔逊和斯皮尔曼,利用matlab计算Pearson和Spearman相关系数
- Python实现端口扫描
- Android 仿美团GridView分页滑动(类似直播礼物列表效果)
- Python并发编程
- 破解Excel工作表密码
- Argo Rollouts 实现蓝绿/金丝雀发布
- 解决java.util.ConcurrentModificationException:null
- python:批量分割图片(把一张图片横向平均分割成7张)
- vsCode html文件格式化
- 零基础学电路(一):白噪声电子催眠器电子温度计
- 第8章第18节:制作企业宣传册的公司团队第五页面 [PowerPoint精美幻灯片实战教程]
- Python将 Unicode 转换为 utf-8 格式
- LinuX 硬盘分区细节详谈
- HAN论文模型代码复现与重构