Highcharts图饼和折线图实践心得

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/eadio/article/details/82594017

使用highcharts插件尽量做到和下两张图片一样的图表类型示例。
折线图
饼图

折线图DEMO

首先是折线图,根据官方栗子,这个并不是很难,需要注意的有三个地方的配置
1、圆圈是个白色空心圆
A:这个主要是修改marker属性下的一些配置,[PS: 一开始对APIs不熟,这个真的我找了好久才找到,一开始修改series下的color和其他fill填充属性,怎么改都不对。。。后来,我也不知道怎么找的就找到了这个属性下的fillColor属性的,恭喜自己一波]

2、y轴和数据标签使用数字,逢3位数会有个空格,怎么去除这个空格的问题
A:这个主要是将数字转为字符串就可以了,也就说格式化下文本在输出

3、x轴的文本倾斜
A:这个是根据容器的宽度文本会自动倾斜的,因此想要达到上方的效果,缩小图表容器吧!
演示DEMO图片:
这里写图片描述
具体详见demo:折线图DEMO

饼图DEMO

这个稍微有点难度,这里说说我的配置
1、设置内部空白圆圈
A:使用innerSize来控制

2、设置外部数据和板块显示百分比两种标签格式
A:这里用了个比较圆滑的处理方式,其实内圆是另外一个饼图,只不过板块颜色设置成了白色,这里也导致了数据没有垂直水平居中

3、圆圈白色透明阴影
A:这个真的找不到相关配置了,希望有知道的小伙伴留言告知下。万分感谢~
演示DEMO图片:
这里写图片描述
DEMO地址:饼图DEMO

猜你喜欢

转载自blog.csdn.net/eadio/article/details/82594017
今日推荐