Highcharts - 即使间距不均匀

Question

我正在处理一个要求，即我需要 Y 轴上的两个窗格和一个共同的 x 轴。我能够做到这一点。然而，在每个 Y 轴上，我需要从 10 到 100 的单位，其中 10 到 50 的间距为 1 厘米，50 到 100 的间距为 5 厘米。 这在附加的屏幕打印中有所描述。

highstock 中是否有我可以用来实现此目的的功能？我研究了tickPixelInterval和对数轴，但走不远:(

此外，即使我没有映射到它的数据点，我也需要确保始终显示 y 轴（10 到 100）上的比例。换句话说，如果我只有两个数据点，比如 60 和 90，那么 60 以下的类别在图表上不可见。但是，我需要所有 10 到 100 个映射始终可见。

任何帮助将不胜感激。提前谢谢你！

Answer 1

1. 轴刻度从 10 到 100

使用轴的最小值和最大值可以设置比例。如果未保留比例（例如从 11 到 99），则将轴的 startOnTick 和 endOnTick 设置为 false 将解决此问题。

示例：http://jsfiddle.net/kcrv97sm/

yAxis: {
    min: 10,
    max: 100,
    tickInterval: 10,
    showLastLabel: true,
    startOnTick: false,
    endOnTick: false
}

API： http://api.highcharts.com/highstock#yAxis.min http://api.highcharts.com/highstock#yAxis.startOnTick

1. 间距不均匀

默认可用轴类型为“线性”、“对数”、“日期时间”或“类别”。

在您的情况下，这还不够。您可以尝试编写或应用自定义 Highstock 扩展 - 包装器，然后将更改比例。

示例 1 - 一个函数：http://jsfiddle.net/a3fLLyo4/73/

示例 2 - 两个函数：http://jsfiddle.net/a3fLLyo4/69/

您必须想出描述如何在轴上设置的函数。您没有指定 60 到 80 之间的比例是否应该是线性的或更复杂的。

Highcharts.wrap(Highcharts.Axis.prototype, 'translate', function (proceed) {
    // Normal Translation
    var result = proceed.apply(this, [].slice.call(arguments, 1));

    // Apply curving
    if (this.options.curvature) {
        var val = 1 - Math.sqrt(1 - Math.pow(((arguments[1]-this.min) / (this.max - this.min)), 2)),
            result = (this.len * val);
        if (arguments[2] == 0) {
            result = this.len - result;
        }
    }
    return result;

});