高图表中大负值和小正值的Y轴

时间:2018-12-18 07:52:40

标签: angular charts highcharts angular2-highcharts

起初,我的数据系列值是完全动态的,它可以包含任何范围的值,因此tickAmountstickInterval对我来说不起作用,并且为单个数据系列添加了多个y轴帮不上忙。
在我的场景中,当相对于较大的负值存在一些较小的正值时发生了问题,因此y轴的tickInterval太大,以至于较小的正值没有出现在图表上,我必须对其进行缩放以查看值。

这里有JSFiddle链接以查看详细信息

这是示例数据系列

series: [{
        name: 'Series 1',
        data: [-348957349855, 23984323, 2938234, 7823479, 2293023]
    }]

是否有解决此问题的解决方案。

1 个答案:

答案 0 :(得分:1)

一个解决方案可能是使用其他yAxis类型。 API显示了一个对数值为负的示例。例如:

yAxis: {
    type:'logarithmic',
    title: {
        text: 'Values'
    }
},

Fiddle

编辑:用于Angular集成

nb:我不是Angular用户,也许这行不通

main.ts

...
import * as Highcharts from 'highcharts';

// Now add the function
(function (H) {
    // Pass error messages
    H.Axis.prototype.allowNegativeLog = true;

    // Override conversions
    H.Axis.prototype.log2lin = function (num) {
        var isNegative = num < 0,
            adjustedNum = Math.abs(num),
            result;
        if (adjustedNum < 10) {
            adjustedNum += (10 - adjustedNum) / 10;
        }
        result = Math.log(adjustedNum) / Math.LN10;
        return isNegative ? -result : result;
    };
    H.Axis.prototype.lin2log = function (num) {
        var isNegative = num < 0,
            absNum = Math.abs(num),
            result = Math.pow(10, absNum);
        if (result < 10) {
            result = (10 * (result - 1)) / (10 - 1);
        }
        return isNegative ? -result : result;
    };
}(Highcharts));
...