Highcharts：更改比例大小答案

【问题标题】：Highcharts: Change scale sizesHighcharts：更改比例大小
【发布时间】：2019-08-04 03:43:34
【问题描述】：

假设您有一个 [0, 3, 6, ...] 的 x 轴 和一个 [0, 3, 6, ...] 的 y 轴 , 5, 10, ...]。

Highcharts 会处理这些值，以便自动以某种方式在 y 方向上相差 5看起来并不比在 x 方向上相差 3 大。

您如何更改值之间的距离 / 使 y 轴上的 5 看起来与 x 轴上变化的 5/3 一样大？（因此 p.e. 从 (0,0) 到点 (5,5) 的线具有 45° 角）

代码示例：

$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json', function (data) {
  Highcharts.chart('container', {
      chart: {
        zoomType: 'x'
      },
      title: {
        text: 'USD to EUR exchange rate over time'
      },
      subtitle: {
        text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        title: {
          text: 'Exchange rate'
        }
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
            ]
          },
          marker: {
            radius: 2
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          threshold: null
        }
      },
      series: [{
        type: 'area',
        name: 'USD to EUR',
        data: data
      }]
  });
});

取自demo

【问题讨论】：

提供一些你为实现你想要的东西所做的代码
图表与演示链接中的图表相似，只是数据不同
假设你有这个图表：jsfiddle.net/1g6ah2t9/1 你希望 xAxis 中 0-5 之间的距离与 yAxis 中 0-5 之间的距离相同，对吧？
@Kabulan0lak 正确！

标签： javascript highcharts scale

【解决方案1】：

在load事件中，您可以计算和调整图表的高度或宽度：

chart: {
    events: {
        load: function() {
            var xAxis = this.xAxis[0],
                yAxis = this.yAxis[0];

            // Adjust xAxis
            this.setSize(
                yAxis.height / (yAxis.max - yAxis.min) *
              (xAxis.max - xAxis.min) + this.plotLeft + this.chartWidth -
              (this.plotLeft + this.plotWidth),
              null,
              false
            );
        }
    }
},

现场演示： http://jsfiddle.net/BlackLabel/64Lxutce/

或者如果您不想更改大小，您可以调整轴极端之一：

chart: {
    events: {
        load: function() {
            var xAxis = this.xAxis[0],
                yAxis = this.yAxis[0],
                xAxisMax = xAxis.width /
                        (yAxis.height / (yAxis.max - yAxis.min)),
                yAxisMax = yAxis.height /
                        (xAxis.width / (xAxis.max - xAxis.min));

            if (xAxisMax < xAxis.max) {
                this.update({
                    yAxis: {
                        max: yAxisMax - yAxis.min
                    }
                }, true, true, false);
            } else {
                this.update({
                    xAxis: {
                        max: xAxisMax - xAxis.min
                    }
                }, true, true, false);
            }
        }
    }
},

现场演示： http://jsfiddle.net/BlackLabel/w3byrL28/

API 参考：

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Chart#update

https://api.highcharts.com/class-reference/Highcharts.Chart#setSize

【讨论】：