Highcharts pie常用方法： legend 样式、 colors、events自定义

最新推荐文章于 2023-10-31 14:43:09 发布

小熊在奋斗

最新推荐文章于 2023-10-31 14:43:09 发布

阅读量1.9k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_47659945/article/details/129119713

版权

1、Higcharts 设置标题换行；
2、Higcharts 图像颜色；
3、自定义legend 事件
4、自定义legend 样式
属性配置代码：

option = {
        chart: {
          spacing: [40, 0, 40, 0]
        },
        title: {
          align: 'center',
          floating: true,
          useHTML: true,//自定义标题设置  userHtml： 为true
          text: ``
        },
        tooltip: {
        },
        credits: {
          enabled: true//隐藏右下角水印
        },
        legend: {
          labelFormatter: function () {//自定义样式
            return `<div style='fontSize: 14px; width: 112px;whiteSpace: nowrap; overflow: hidden; textOverflow: ellipsis'>${this.name}</div> <div style="fontSize: 14px; color: #777777">${this.y} 亿元</div>`
          },
          useHTML: true,//应许自定义 legend 样式
          itemDistance: 70,//定义legenditem 间距
          itemStyle: { height: 40, padding: 10 },
          margin: 50
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            colors: ['#1BA0EA','#37D99E','#7ED3F4','#7E9AF4','#007DFF','#00BFC9','#A051E9','#E82E90','#E88B00','#41BA41','#ADD7FF'],//定义饼图颜色按照自定义颜色渲染
            dataLabels: {
              enabled: true,
              formatter: function (param) {//自定义dataLabel 样式
                return `<div style='width: 70px;whiteSpace: nowrap; overflow: hidden; textOverflow: ellipsis'>${this.point.name}</div> <div>${this.point.y} 亿元</div>`
              },
              useHTML: true,
              style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              }
            },
            showInLegend: true,
            events: {
              click: function (e) { // 同样的可以在点击事件里处理 定义饼图点击事件
                
              }
            },
            point: {
              events: {
                legendItemClick: function (e) {//从自定义legend 点击事件
                 
                  return false; // 直接 return false 即可禁用图例点击事件
                }
              }
            }
          }
        },
        series: [{
          type: 'pie',
          innerSize: '65%',//设置饼图内外环比例
          size: '150',//固定饼图大小
          name: '',
          data: [{name: 'test'; y: 12}],
          events: {
            legendItemClick: function () {

            },
            click: function (e) {

            }

          }
        }]
      }