Question

我正在制作高分辨率图表和工具提示时，它是100 +和1000 +在工具栏上有一个符号，但也有共享：true。同样在图表上，当它是2394时，我将它向下舍入到2.39所以图形不是那么大，然后在工具栏上它会显示2.39K。

我已经尝试了很多，我无法弄清楚整个堆栈溢出并没有找到任何东西。

＆＃13;

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'
    }]

});

＆＃13;

<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>

＆＃13;

这就是我现在所拥有的：

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

}

Answer 1

您可以使用工具提示中的formatter选项进行更复杂的格式设置。参见：

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个十进制大小写，此外，它还会添加＆＃39; k＆＃39;标签最后。

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

希望它有所帮助！：d

当超过100时，HighCharts向下舍入

1 个答案: