• highcharts的yAxis标题过长 分行显示


    https://blog.csdn.net/Doubleu_/article/details/84565645?utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase

    highcharts的yAxis标题过长加上这段就行啦

    1.  
      labels: {
    2.  
      formatter: function() {
    3.  
      //获取到刻度值
    4.  
      var labelVal = this.value;
    5.  
      //实际返回的刻度值
    6.  
      var reallyVal = labelVal;
    7.  
      //判断刻度值的长度
    8.  
      if(labelVal.length > 2) {
    9.  
      //截取刻度值
    10.  
      reallyVal = labelVal.substr(0, 2) + "<br/>" +labelVal.substring(2, labelVal.length);
    11.  
      }
    12.  
      return reallyVal;
    13.  
      }
    14.  
      },

    附上完整代码

    1.  
      var chart = Highcharts.chart('container', {
    2.  
      chart: {
    3.  
      polar: true,
    4.  
      },
    5.  
      title: {
    6.  
      text: null
    7.  
      },
    8.  
      pane: {
    9.  
      size: '80%'
    10.  
      },
    11.  
      xAxis: {
    12.  
      categories: ['偿债能力', '应急能力', '储蓄能力', '财富增值',
    13.  
      '支出健康', '家庭保障'
    14.  
      ],
    15.  
      labels: {
    16.  
      formatter: function() {
    17.  
      //获取到刻度值
    18.  
      var labelVal = this.value;
    19.  
      //实际返回的刻度值
    20.  
      var reallyVal = labelVal;
    21.  
      //判断刻度值的长度
    22.  
      if(labelVal.length > 2) {
    23.  
      //截取刻度值
    24.  
      reallyVal = labelVal.substr(0, 2) + "<br/>" + labelVal.substring(2, labelVal.length);
    25.  
      }
    26.  
      return reallyVal;
    27.  
      }
    28.  
      },
    29.  
      tickmarkPlacement: 'on',
    30.  
      lineWidth: 0
    31.  
      },
    32.  
      yAxis: {
    33.  
      gridLineInterpolation: 'polygon',
    34.  
      lineWidth: 0,
    35.  
      min: 0
    36.  
      },
    37.  
      legend: {
    38.  
      enabled: false
    39.  
      },
    40.  
      exporting: {
    41.  
      enabled: false
    42.  
      },
    43.  
      credits: {
    44.  
      enabled: false
    45.  
      },
    46.  
       
    47.  
      series: [{
    48.  
      name: '偿债能力',
    49.  
      type: 'area',
    50.  
      data: [43000, 19000, 60000, 35000, 17000, 10000],
    51.  
      pointPlacement: 'on'
    52.  
      }, {
    53.  
      name: '应急能力',
    54.  
      type: 'area',
    55.  
      data: [50000, 39000, 42000, 31000, 26000, 14000],
    56.  
      pointPlacement: 'on'
    57.  
      }]
    58.  
      });

    效果图:

  • 相关阅读:
    用django搭建自己的博客
    python模块调用
    python常用函数
    ubuntu不能访问windows中的文件
    更改ubuntu下mysql的密码
    重拾代码,加油
    java 接收 char字符型
    Git基础
    flask中'bool' object has no attribute '__call__'问题
    基于python的flask的应用实例注意事项
  • 原文地址:https://www.cnblogs.com/xinzhyu/p/13475302.html
Copyright © 2020-2023  润新知