Highcharts 在 y 轴上自定义缩放 - 线性和对数的混合

Question

我正在尝试在图表上使用对数刻度，如下所示：

但是，出站数据远低于入站数据。这在图表中没有正确显示，并且看起来实际上出站数据多于入站数据。

我希望有一个最大到 y 轴最大值 (136) 的线性刻度和一些额外的偏移量，所以基本上到 150 它应该显示线性刻度，从那里到 600（显示最大容量标记）是对数的。 Highcharts 可以做到这一点吗？也许最好使用的函数是tickPositioner http://api.highcharts.com/highcharts#yAxis.tickPositioner。

最终想要的结果应该是这样的：

Answer 1

嗯，这当然是一个混乱的解决方案，但您可以将两个图组合在一起：

小提琴在这里。

$(function () {
        $('#containerBot').highcharts({
            chart: {marginTop: 1},
            title: {margin: 0, text: ''},
            yAxis: {max: 100},
            exporting: {enabled: false},
            series: [{
                name: 'One',
                data: [70.0, 60.9, 90.5, 140.5, 180.2, 210.5, 205.2, 260.5, 230.3, 180.3, 130.9, 90.6]
            }, {
                name: 'Two',
                data: [-0.2, 0.8, 50.7, 110.3, 170.0, 220.0, 240.8, 204.1, 200.1, 140.1, 80.6, 20.5]
            }]
        });
        $('#containerTop').highcharts({
            chart: {marginBottom: -1},
            title: {text: 'My Chart'},
            yAxis: {min: 100},
            xAxis: {labels: {enabled: false}},
            legend: {enabled: false},
            exporting: {enabled: false},
            credits: {enabled: false},
            series: [{
                name: 'One',
                data: [70.0, 60.9, 90.5, 140.5, 180.2, 210.5, 205.2, 260.5, 230.3, 180.3, 130.9, 90.6]
            }, {
                name: 'Two',
                data: [-0.2, 0.8, 50.7, 110.3, 170.0, 220.0, 240.8, 204.1, 200.1, 140.1, 80.6, 20.5]
            }]
        });
});

Answer 2

对于任何有类似问题的人，请更新 2024 年：

在创建图表之前添加此内容：

(function (H) {
    H.addEvent(H.Axis, 'afterInit', function() {
        const logarithmic = this.logarithmic;
        if (logarithmic){
            logarithmic.positiveValuesOnly = false;  
            const scale = (num, in_min, in_max, out_min, out_max) => {
                return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
            }
            
            const defaultGetLogTickPositions = logarithmic.getLogTickPositions;
            const defaultLog2lin = logarithmic.log2lin;
            const defaultLin2log = logarithmic.lin2log;
            const customTicks = this.options.customTicks;
            
            logarithmic.getLogTickPositions = function (interval, min, max, minor) {
                if (customTicks) {
                    let interval = customTicks[customTicks.length - 1] / (customTicks.length - 1);
                    return customTicks.map((v, i) => i * interval)
                }
                else {
                    return defaultGetLogTickPositions(interval, min, max, minor);
                }
            };

            logarithmic.log2lin = function (num) {
                if (customTicks) {
                    let tickInterval = ( customTicks[customTicks.length-1] / ( customTicks.length - 1 ) );
                    for (let i = 0; i < customTicks.length - 1; i++) {
                    if (num <= customTicks[i+1]) {
                        return scale(num, customTicks[i], customTicks[i+1], i * tickInterval, (i + 1) * tickInterval )
                    }
                    }
                    return 0;
                }
                else {
                    return defaultLog2lin(num);
                }

            };
            
            logarithmic.lin2log = function (num) {
                if (customTicks) {
                    let tickInterval = ( customTicks[customTicks.length-1] / ( customTicks.length - 1 ) );
                    for (let i = 0; i < customTicks.length - 1; i++) {
                    if (num <= tickInterval * (i + 1)) {
                        return scale(num, i * tickInterval, (i + 1) * tickInterval, customTicks[i], customTicks[i+1] )
                    }
                    }
                }
                else {
                    return defaultLin2log(num);
                }
            };
        }  
    });
}(Highcharts));

现在在图表初始化中，将其用于 yAxis：

{
    type: 'logarithmic',
    customTicks: [0,20,40,60,80,100,120,140,160,400,600]  //modify according to your data
}

小提琴