如果我有一个高于1000的数据，我想显示1k

Question

我有一个面临的问题，当我有一个大于1000的数据时，它会使图形干扰所以我想减少它，如果它更大1000它开始在高图表的栏顶部显示1k

你可以在下面的链接my code上看到它

Highcharts.chart('container',{chart:{type:'bar'},
title:{text:'Historic World Population by Region'},
subtitle:{text:'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'},
xAxis:{categories:['Africa','America','Asia','Europe','Oceania'], 
title:{text:null}}, yAxis:{min:0,title:{text:'Population (millions)', align:'high'}, 
labels:{overflow:'justify'}}, tooltip:{valueSuffix:' millions'},
plotOptions:{bar:{dataLabels:{enabled:true}}},legend:{layout:'vertical',align:'right',verticalAlign:'top', 
x:-40,y:80,floating:true,borderWidth:1,
backgroundColor:((Highcharts.theme&&Highcharts.theme.legendBackgroundColor)||'#FFFFFF'), shadow:true},
credits:{enabled:false},
series:[{name:'Year 1800',data:[107,31,635,203,2]},{name:'Year 1900',data:[133,156,947,408,6]},
{name:'Year 2000',data:[814,841,3714,727,31]},
{name:'Year 2016',data:[1216,1001,4436,738,40]}]});

Answer 1

您可以预处理数据并替换y值：

var series = [...];

series.forEach(function(s) {
    s.data.forEach(function(point, i) {
        if (point >= 1000) {
            s.data[i] = {
                y: 1000,
                realValue: point
            }
        }
    });
});

如果要显示实际值，可以存储它们并显示在工具提示和数据标签中：

Highcharts.chart('container', {
    ...,
    tooltip: {
        formatter: function(tooltip) {
            if (this.point.realValue) {
                return '<span style="font-size: 10px">' + this.x + '</span><br/>' +
                    '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.realValue + '</b><br/>';
            }
            // If not null, use the default formatter
            return tooltip.defaultFormatter.call(this, tooltip);
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return this.point.realValue ? this.point.realValue : this.y
                }
            }
        }
    },
    series: series
});

现场演示：http://jsfiddle.net/BlackLabel/18fe7yrw/

API参考：

https://api.highcharts.com/highcharts/series.bar.dataLabels.formatter

https://api.highcharts.com/highcharts/tooltip.pointFormatter