Highcharts问题 - 在可缩放的图表中显示标签 [英] Highcharts problem - showing labels in zoomable chart

问题描述

我有一个缩放列图表，在xAxis中有超过200个类别。因此，当它处于初始状态（比例1：1）时，所有这些人都显示在X轴下，即使我将它们垂直放置也不可能读取任何东西。我需要放大图表，使标签可见。

I have a zoom column chart with more then 200 categories in xAxis. Consequently, when it is in the initial state (scale 1:1), all these guys are shown under the X axis, and it's impossible to read anything even if I place them vertically. I need to zoom the chart to make the labels visible.

这是问题的屏幕截图：

Here's screenshot of the problem:

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

可以调整标签的浓度（也许自动改变步骤）取决于缩放级别？

Is it possible to adjust the concentration of the labels (perhaps change the step automatically) depending on a zoom level?

我非常感谢您的帮助。

谢谢，
Andrzej

Thanks, Andrzej

推荐答案

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

In order from easiest to most difficult...

因为你的类别大多数是数字的（例如'mir001'），你可以省略类别，这将阻止他们被显示。

Since your categories are mostly numeric (e.g. 'mir001'), you could omit the categories, which would prevent them from all being displayed. They would then show 1, 2, 3, and so on.

或者，您可以删除类别，并使用标签格式化程序。在这种情况下，你可以这样做，再次利用标签看起来是数字和增加的事实：

Alternatively, you could remove the categories and use a label formatter. In this case, you could do something like this, again taking advantage of the fact that the labels appear to be numeric and increasing:

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

这两个都会减少标签的数量（标签会遵循一些模式， 50，100，直到缩放）。

Both of the above would reduce the number of labels (the labels would follow some pattern such as 1, 50, 100, until zoomed).

如果你想非常特别的标签，你必须使用标签格式化，做一些数学找到标度以确定应如何显示标签。例如，你可以这样做，虽然它是相当复杂：

If you wanted to be very particular about the labels, you would have to use the label formatter and do some math to find the scale of the graph to determine how the labels should be displayed. You could, for example, do something like this, though it is quite convoluted:

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

我应该指出，最后一个解决方案不能正常工作，进一步说明它是多么困难。

I should point out that the last solution doesn't exactly work, further illustrating how difficult it is.

这篇关于Highcharts问题 - 在可缩放的图表中显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！