javascript - HighCharts 超过 100 时向下舍入

Question

我在制作 Highcharts 和工具提示后，当它是 100 + 和 1000 + 时，在工具栏上有一个符号，但也有它以便共享:true。同样在图表上，当它是 2394 时，我将其四舍五入到 2.39，这样图表就不会那么大，然后在工具栏上它会显示 2.39K。

我已经尝试了很多，但我无法通过堆栈溢出来弄清楚这一点，但没有找到任何东西。

http://jsfiddle.net/sb7n32zn/22/

Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'area',
        backgroundColor: 'transparent',
         
        
   
    },
    
    exporting: {
        buttons: {
            contextButton: {
                enabled: false
            }    
        }
    },
    
     legend: {
            itemStyle: {
                color: '#c4c4c4',
                fontWeight: 'bold'
            }
        },
    
   credits: {
      enabled: false
  },
  
  
  title: {
    style: {
        display: 'none'
    }
},


plotOptions: {
        series: {
            lineColor: '#808080'
        }
    },


    pane: {
        size: '80%',
       
       
    },

    xAxis: {
        categories: ['Win Rate', 'Kills', 'Deaths', 'Assits',
                'Minions Killed', 'Gold Earned', 'Damage Dealt'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
         style: {
            color: '#c4c4c4',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      }
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0,
        gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
         style: {
            color: '#c4c4c4',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      }
    },

    tooltip: {
        shared: true,
        pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
        
    },

   

    series: [{
        name: 'Aatrox',
        color: 'rgba(184, 70, 70, 0.7)',
        data: [3843, 7, 7, 6, 15.7, 11.78, 22.05],
        pointPlacement: 'on'
    }, {
        name: 'Gay Something',
        color: 'rgba(85, 184, 70, 0.5)',
        data: [6245, 9, 6, 5, 18.6, 13.54, 23.46],
        pointPlacement: 'on'
    }]

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; max-width: 450px; height: 400px; margin: 0 auto"></div>

这是我目前拥有的:

tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',

}

Answer 1

您可以使用工具提示中的格式化程序选项来进行更复杂的格式化。请参阅:

tooltip: {
        shared: true,
        formatter: function () {
          console.log(this);

          var txt = this.x + ": <br />";

          for(var i=0;i<this.points.length;i++){
            var value = this.points[i].y;
            if(value>=1000){
                value = (value/1000).toFixed(2) + 'k';
            }

            txt = txt + '<span style="color:' + this.points[i].color + '">'
              + this.points[i].series.name + ': <b>' + value + '</b><br/>';
          }

          return txt;
        }
    },

在此函数中，如果您的系列值大于或等于 1000，则会除以 1000 并修复 2 位小数情况，此外，还会在末尾添加“k”标签。

但是，该图仍然很大，因为该值比其他图大很多。我认为你必须为此对数据进行预处理。

希望对您有帮助! :D