highcharts可变宽度饼图的引用和json数组的传参

demo链接:https://github.com/hehaoxiang/SpringBootPractice.git
可变宽度环形图:https://www.highcharts.com.cn/demo/highcharts/variable-radius-pie
在这里插入图片描述
前台代码的:

 <div id="left" class="bottom"></div>
 <script th:inline="javascript">
 var thyarg_arr = [[${arr}]]  ;
//可变宽度饼图,后台要传过来的json数组的key值要对应为小写,否则无法接收数据
var chart3 = Highcharts.chart('center', {
    chart: {
        type: 'variablepie'
    },
    title: {
        text: '白白'
    },
    tooltip: {
        headerFor
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Highcharts中,您可以使用渐变色为3D饼图添加视觉效果。在给定的引用代码中,使用官方示例代码创建了渐变色。渐变色的构建是通过修改Highcharts选项中的颜色数组实现的。首先,使用`Highcharts.getOptions().colors`获取默认颜色数组,然后使用`Highcharts.map()`方法对每个颜色进行处理,并返回一个包含渐变设置的对象。对象中的`radialGradient`属性定义了渐变的配置,其中`cx`和`cy`表示圆心的位置,`r`表示渐变的半径。`stops`属性定义了渐变的颜色范围,包含起始颜色和结束颜色。在示例代码中,结束颜色是通过`Highcharts.Color(color).brighten(-0.3).get('rgb')`方法计算得到的。 但是在使用Vue的热更新时,可能会遇到报错`TypeError: b.indexOf is not a function`。这是因为在第二次加载时,颜色值从字符串变为了一个对象,导致设置颜色值时出现错误。为了解决这个问题,可以对代码进行优化,以确保每次都可以正确获取颜色值。可以使用`instanceof`操作符来判断颜色是否为一个对象。如果是对象,则从对象中获取起始颜色和结束颜色的值,否则直接使用该颜色和通过`Highcharts.Color(color).brighten(0.15).get('rgb')`方法计算结束颜色的值。 通过以上方法,您可以为Highcharts的3D饼图添加渐变色。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [关于vue使用highcharts饼状图渐变色报错问题](https://blog.csdn.net/developer_qi/article/details/124126398)[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 ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值