Highcharts的3D饼图上下颠倒及解决办法

我需要的样式效果:
在这里插入图片描述

那发现常规的echarts不满足了,就改成了highcharts进行3d图表开发,but在开发的过程中发现了这个现象

来吧,看看问题

第一次进入页面,饼图是正常的:
戳这个进去瞅瞅:
那你进去就看到这个样子的饼图呢。

在这里插入图片描述
但是由于我的项目需求,我需要更改代码,但是发现一个神奇的现象,我不论删除data的数据,还是更改数据,我的图就成了倒立的了。。。。
在这里插入图片描述

原因排查:
在这里插入图片描述

在这里插入图片描述


可能性一。
一开始我以为是,我数据太少了,那我又改成了多个数据发现还是不行。最后的最后我又发现,不论干啥,只要动人家的源代码,那么就会出现这种情况。
可能性二。
在微信浏览器里不会出现这个情况,只在chorme和IE浏览器都有这个情况

so 原因是个啥??? 不知道-但是有解决办法了


new — 更新啦 更新啦 更新啦 更新啦


解决办法:官方的大佬给的,但是他说官网没维护 ::源代码: 戳戳戳

主要是这部分的添加上就好了

Highcharts.addEvent(chart, 'redraw', function() {
   var each = Highcharts.each,
   	points = chart.series[0].points;
   each(points, function(p, i) {
   	// if (i !== 1 && i !== 2) {
   	p.graphic.attr({
   		translateY: -p.shapeArgs.ran
   	});
   	p.graphic.side1.attr({
   		translateY: -p.shapeArgs.ran
   	});
   	p.graphic.side2.attr({
   		translateY: -p.shapeArgs.ran
   	});
   });
});
  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
要配置highcharts 3D饼图,首先需要引入必要的模块和库: - 首先,使用引用中提到的highcharts3d(highcharts)来调用3D图表。 - 其次,需要引入highcharts3d模块,可以使用引用中提到的import highcharts3d from 'highcharts/highcharts-3d'。 - 接下来,在项目的main.js文件中进行配置,引入highcharts库,可以使用引用中提到的import highcharts from 'highcharts'。 一旦完成了这些步骤,就可以开始配置highcharts 3D饼图。高图3D饼图的配置项包括以下几个重要参数: - chart类型设置为'pie'。 - series数组中的data属性设置为要显示的数据。 - plotOptions中的pie对象设置3D相关属性,如depth、innerSize等。 - title对象设置饼图的标题。 以下是一个示例配置项的代码: ``` Highcharts.chart('container', { chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }, title: { text: '3D Pie Chart' }, plotOptions: { pie: { allowPointSelect: true, innerSize: 100, depth: 45 } }, series: [{ name: 'Data', data: [ ['Category 1', 30], ['Category 2', 20], ['Category 3', 15], ['Category 4', 10] ] }] }); ``` 以上配置项可以在HTML页面中使用highcharts库和相应的容器元素(如div)来呈现一个高图3D饼图。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [highcharts 3D饼图](https://blog.csdn.net/weixin_42246997/article/details/121510397)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值