Overriding log scale with highcharts export server

问题

I am trying to get a chart with a negative log scale working in the node highcharts export server. The example from here

https://www.highcharts.com/blog/snippets/alternative-maths-plotting-negative-values-logarithmic-axis/

works fine in the browser but I can't find a way of overriding the log scale in npm.

e.g. this part

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

Highcharts is undefined and I am not sure if the after init will even work...

I have experimented with the callback param you can provide but no luck with that either.

I am also using the http server and not the cli... https://github.com/highcharts/node-export-server#http-server

Thanks alot :)

-- Update below

It still seems to generate a chart with a non negative axis. Here are pictures to show what I mean. Also I have to use the http server not the cli (I dont think this should make a difference)

Requirement

Actual output

回答1:

The easiest solution would be to make use of a callback option. Place the new event in a separate file in a function. Below, update the yAxis to logarithmic type. Finally, use the following command: highcharts-export-server log.json --callback log.js --outfile log.png --type png where:

log.json

{
    "title": {
      "text": "Logarithmic axis with custom conversion allows negative values"
    },
    "xAxis": {
      "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    },
    "series": [{
      "data": [-1000, -100, -10, -1, -0.1, 0, 0.1, 1, 10, 100, 1000]
    }]
}

log.js

function(chart) {
    var H = Highcharts;
 
    H.addEvent(H.Axis, 'afterInit', function() {
        var logarithmic = this.logarithmic;
 
        if (logarithmic && this.options.custom.allowNegativeLog) {
            // Avoid errors on negative numbers on a log axis
            this.positiveValuesOnly = false;
 
            // Override the converter functions
            logarithmic.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;
            };
 
            logarithmic.lin2log = function(num) {
                var isNegative = num < 0,
                    result = Math.pow(10, Math.abs(num));
 
                if (result < 10) {
                    result = (10 * (result - 1)) / (10 - 1);
                }
                return isNegative ? -result : result;
            };
        }
    });
 
    chart.yAxis[0].update({
        type: 'logarithmic',
        custom: {
            allowNegativeLog: true
        }
    });
}

Docs Reference:
https://github.com/highcharts/node-export-server/blob/master/README.md

[UPDATE]

The better idea is to create a separate JS file (e.g. negative-log.js) which will contain the following code:

(function (H) {
    H.addEvent(H.Axis, 'afterInit', function () {
        var logarithmic = this.logarithmic;

        if (logarithmic && this.options.custom.allowNegativeLog) {

            // Avoid errors on negative numbers on a log axis
            this.positiveValuesOnly = false;

            // Override the converter functions
            logarithmic.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;
            };

            logarithmic.lin2log = function(num) {
                var isNegative = num < 0,
                    result = Math.pow(10, Math.abs(num));

                if (result < 10) {
                    result = (10 * (result - 1)) / (10 - 1);
                }
                return isNegative ? -result : result;
            };
        }
    });
}(Highcharts));

Next, you need to create a resources.json file which is a JSON object with the "files" property. The value of this property needs to be a string with names of all custom JS files that you want to include (in your case it will be negative-log.js only). The path can be relative. It can look something like this:

{
    "files": "./_custom_files/negative-log.js"
}

More information can be found in the documentation: https://www.highcharts.com/docs/export-module/render-charts-serverside.

来源：https://stackoverflow.com/questions/63343645/overriding-log-scale-with-highcharts-export-server

标签

javascript

node.js

Highcharts