高图表等距缩放

Highcharts equidistant scaling

本文关键字:缩放 高图表      更新时间:2023-09-26

我需要这个图表看起来像这样。

问题是 de 轴点在轴之间不等距。

我试图将序号属性设置为 false,但它不起作用。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Mohr'
        },
        xAxis: {
            tickInterval: 0.5,
            title: {
                text: ''
            },
            min: 0
        },
        yAxis: {
            tickInterval: 0.5,
            title: {
                text: ''
            },
            min: 0
        },
        series: [{
            name: 'Circ 1',
            marker: {
                    enabled: false
                },
            data: [[2.684809439972451,0.0],[2.6822125873590954,0.06609431256698768],(...more)]
        }, {
            name: 'Circ 2',
            marker: {
                    enabled: false
                },
            data: [[3.7570186145196027,0.0],[3.75431046351298,0.0689270458360995],(...more)]
        }, {
            name: 'Circ 3',
            marker: {
                    enabled: false
                },
            data: [[4.805153756251244,0.0],[4.802371412955787,0.0708153656825976], (...more)]
        }]
    });
});

我找不到路。

谢谢!

我认为在这种情况下

使用tickPixelInterval(或minorTickInterval)没有必要或好处。

该属性不精确,图表仍将根据您提供的值来选择它认为合适的值。

您所要做的就是确保为每个轴设置最小值和最大值以及tickInterval,以便您可以控制每个轴上显示多少"块"6。

然后相应地设置容器的高度和宽度,以确保块宽度与其高度相同。 不要忘记考虑图表边距(最好的方法是显式设置它们,这样您就不必猜测或计算)。

例:

  • http://jsfiddle.net/jlbriggs/htkv6tu3/

图表无法原生确定您希望 x 轴和 y 轴的值具有相同的比例,并且在大多数图表中,这实际上是不可取的。