对数模式下缺少负值

Question

所以在解决了关于 SOF 的其他问题之后。
我正在为 Highcharts 使用 HighchartsReact 包装器。

预期行为：
即使在对数刻度中，也可以在堆积柱形图中显示负值。 当切换 y 值

实际行为：
当从线性变为对数时，负值会消失。此外，当回到线性时，之前在线性比例中看到的负值 - 消失并且不属于图表的一部分。 它在几周前开始工作，然后突然停止工作。

带有重现步骤的现场演示：

• demo
• official Custom Axis extension to allow emulation of negative values on a logarithmic

产品版本 9.3.2

如何使用 HighchartsReact 添加此功能？我尝试传递一个回调并在 React.useEffect 内部使用图表参考。但无论我做什么，仍然缺少负值。回到线性只是从系列中删除原始的负值。

(function (H) {
    H.addEvent(H.Axis, 'afterInit', function () {
        const 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 = num => {
                const isNegative = num < 0;

                let adjustedNum = Math.abs(num);

                if (adjustedNum < 10) {
                    adjustedNum += (10 - adjustedNum) / 10;
                }

                const result = Math.log(adjustedNum) / Math.LN10;
                return isNegative ? -result : result;
            };

            logarithmic.lin2log = num => {
                const isNegative = num < 0;

                let result = Math.pow(10, Math.abs(num));
                if (result < 10) {
                    result = (10 * (result - 1)) / (10 - 1);
                }
                return isNegative ? -result : result;
            };
        }
    });
}(Highcharts));

Answer 1

如果您想查看变化情况，您需要定义变量chart。

const chart = Highcharts.chart('container', { 
});

现场演示：https://jsfiddle.net/BlackLabel/x1zp347m/

这里是官方的 Highcharts React 包装器，您将在其中了解如何在 React 中使用 Highcharts。 https://github.com/highcharts/highcharts-react#basic-usage-example

编辑 ---------------------------------- ----------------

要扩展图表自定义代码或编辑核心，您可以在导入后触发函数。

如何扩展 Higcharts 代码： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

(function (H) {
  H.addEvent(H.Chart, 'load', function (e) {
      var chart = e.target;
      H.addEvent(chart.container, 'click', function (e) {
          e = chart.pointer.normalize(e);
          console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY);
      });
      H.addEvent(chart.xAxis[0], 'afterSetExtremes', function (e) {
          console.log('Set extremes to ' + e.min + ', ' + e.max);
      });
  });
}(Highcharts));

const options = {
  title: {
    text: 'My chart'
  },
  plotOptions: {
    series: {
        enableMouseTracking: true
    }
},
  series: [{
    data: [1, 2, 3]
  }]
}

const App = () => <div>
  <HighchartsReact
    highcharts={Highcharts}
    options={options}
  />
</div>

render(<App />, document.getElementById('root'))

https://stackblitz.com/edit/react-t6rh4c?file=components%2FChart.jsx