charts - Highcharts 问题 - 在可缩放图表中显示标签

Question

我有一个缩放柱形图，xAxis 中有超过 200 个类别。因此，当它处于初始状态(比例1:1)时，所有这些家伙都显示在X轴下方，即使我将它们垂直放置，也无法读取任何内容。我需要缩放图表以使标签可见。

这是问题的屏幕截图:

这是我的代码: http://jsfiddle.net/sherlock85/hJcQm/

是否可以根据缩放级别调整标签的浓度(也许自动更改步骤)？

我非常感谢您的帮助。

谢谢，安杰伊

Answer 1

按照从最简单到最困难的顺序...

由于您的类别主要是数字(例如“mir001”)，因此您可以省略类别，这将阻止它们全部显示。然后他们会显示 1、2、3 等等。

或者，您可以删除类别并使用 label formatter 。在这种情况下，您可以执行类似的操作，再次利用标签显示为数字且递增的事实:

chart = new Highcharts.Chart({
    xaxis: {
        labels: {
            formatter: function() {
                return "mir" + this.value;
            }
        }
    }
});

以上两者都会减少标签的数量(标签将遵循某种模式，例如 1、50、100，直到缩放)。

如果您想对标签非常挑剔，则必须使用标签格式化程序并进行一些数学运算来找到图形的比例，以确定标签的显示方式。例如，您可以做这样的事情，尽管它相当复杂:

var categories = [] //have your categories as a separate list
var buckets = 4; 
var labelFormatter = function(frequency) {
    var count = 0;
    frequency = frequency || 0;
    return function () {
        count++;
        if ((count > frequency) || (frequency < 1)) {
                return this.value
        }
    }
};

chart = new Highcharts.Chart({
    zoomtype: 'x',
    events: {
        selection: function(event) {
            if (event.xAxis) {
                var scale = event.xAxis[0];
                var frequency = Math.floor((scale.max - scale.min) / buckets)
                this.xaxis[0].labels.formatter = labelFormatter(frequency);
            }
        }
    },
    xaxis: {
        labels: {
            formatter: labelFormatter(Math.floor(categories.length/buckets))
        }
    }
});

我应该指出，最后一个解决方案并不完全有效，进一步说明了它有多么困难。