Question

比方说，您有一个 x轴进入[0，3，6，...]和 y轴类似于[0 ，5、10，...]。

Highcharts处理这些值，以便自动，在某种程度上y方向的差异看起来并不比在x方向上的差异3大。

如何更改值之间的距离 /使y轴上的5显示为x轴上变化的5/3大？（因此，从（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

Answer 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

高图：更改比例尺大小

1 个答案: