使用Highcharts导出服务器覆盖日志比例 [英] Overriding log scale with highcharts export server
问题描述
我正在尝试在节点highcharts导出服务器中使用对数比例为负的图表.这里的例子
实际输出
最简单的解决方案是利用回调选项.将新事件放在函数中的单独文件中.在下面，将yAxis更新为对数类型.最后，使用以下命令: highcharts-export-server log.json --callback log.js --outfile log.png --type png 其中:
log.json
{标题":{文本":具有自定义转换的对数轴允许负值".}，"xAxis":{类别":["Jan"，"Feb"，"Mar"，"Apr"，"May"，"Jun"，"Jul"，"Aug"，"Sep"，十月"，十一月"，十二月"]}，系列":[{数据":[-1000，-100，-10，-1，-0.1、0、0.1、1、10、100、1000]}]} log.js
功能(图表){var H =高图；H.addEvent(H.Axis，'afterInit'，function(){var logarithmic = this.logarithmic;if(对数&&this.options.custom.allowNegativeLog){//避免在对数轴上出现负数错误this.positiveValuesOnly = false;//覆盖转换器函数logarithmic.log2lin = function(num){var isNegative = num<0，AdjustedNum = Math.abs(num)，结果;if(adjustedNum< 10){调整后的数值+ =(10-调整后的数值)/10;}结果= Math.log(adjustedNum)/Math.LN10;返回isNegative吗?-结果:结果；};logarithmic.lin2log = function(num){var isNegative = num<0，结果= Math.pow(10，Math.abs(num));如果(结果< 10){结果=(10 *(结果-1))/(10-1);}返回isNegative吗?-结果:结果；};}});chart.yAxis [0] .update({类型:对数"，风俗: {allowNegativeLog:true}});}
文档参考:
https://github.com/highcharts/node-export-服务器/blob/master/README.md
[UPDATE]
更好的主意是创建一个单独的JS文件(例如 negative-log.js )，该文件将包含以下代码:
(function(H){H.addEvent(H.Axis，'afterInit'，function(){var logarithmic = this.logarithmic;if(对数&&this.options.custom.allowNegativeLog){//避免在对数轴上出现负数错误this.positiveValuesOnly = false;//覆盖转换器函数logarithmic.log2lin = function(num){var isNegative = num<0，AdjustedNum = Math.abs(num)，结果;if(adjustedNum< 10){调整后的数值+ =(10-调整后的数值)/10;}结果= Math.log(adjustedNum)/Math.LN10;返回isNegative吗?-结果:结果；};logarithmic.lin2log = function(num){var isNegative = num<0，结果= Math.pow(10，Math.abs(num));如果(结果< 10){结果=(10 *(结果-1))/(10-1);}返回isNegative吗?-结果:结果；};}});}(高级图表))； 接下来，您需要创建一个 resources.json 文件，该文件是带有"files"标签的JSON对象.财产.此属性的值必须是一个字符串，其中包含要包含的所有自定义JS文件的名称(在您的情况下，该名称将仅为 negative-log.js ).路径可以是相对的.它可能看起来像这样:
{文件":"./_ custom_files/negative-log.js"} 更多信息可在文档中找到: https://www.highcharts.com/docs/export-module/render-charts-serverside .
I am trying to get a chart with a negative log scale working in the node highcharts export server. The example from here
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
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.
这篇关于使用Highcharts导出服务器覆盖日志比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
