highcharts -将y轴标签向右对齐,并使图表宽度“变小”

yws3nbqq  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(264)

我有一个有两个Y轴的图表。一个在图表的左边,另一个在图表的右边。右边Y轴上的标签显示在图表内部。当我将标签向右对齐时,在某些情况下,标签仍然与Y轴重叠。当我添加距离x: 30时,距离变大,但标签不再完全显示,因为它们在图表外部。
我希望标签有一个类似的距离y轴为左y轴,并仍然显示在图表“区域”内。
这里有一个jsfiddle:https://jsfiddle.net/smaica/zrn87q0b/32/
和我的图表选项:

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {

    Highcharts.stockChart('container', {
                title: {
        text: undefined,
    },
    series: [
    {
        data: [
          [1279324800000,0.1],
          [1279411200000,0.2],
          [1279497600000,0.3],
          [1279584000000,0.4],
          [1279670400000,0.5],
          [1279756800000,0.6],
          [1279843200000,0.7],
          [1279929600000,0.8],
          [1280016000000,0.7],
          [1280102400000,0.6],
          [1280188800000,0.5],
          [1280275200000,0.4],
          [1280361600000,0.3],
          [1280448000000,0.2],
          [1280534400000,0.1]
      ],
      name: "series1",
      yAxis: 0
    },
    {
      data: [
        [1279324800000,0.8],
        [1279411200000,0.7],
        [1279497600000,0.6],
        [1279584000000,0.5],
        [1279670400000,0.4],
        [1279756800000,0.3],
        [1279843200000,0.2],
        [1279929600000,0.1],
        [1280016000000,0.2],
        [1280102400000,0.3],
        [1280188800000,0.4],
        [1280275200000,0.5],
        [1280361600000,0.6],
        [1280448000000,0.7],
        [1280534400000,0.8]
    ],
    name: "series2",
    yAxis: 1
  }
    ],
    plotOptions: {
        series: {
            dataGrouping:{
                enabled: false
            },
            lineWidth: 1.5,
            fillOpacity: 0.5,
        }
    },
    chart: {
        borderWidth: 0,
        plotShadow: false,
        plotBorderWidth: 0,
        alignTicks: true,
        zooming: {
            type: 'x',
        },
    },
    accessibility: {
        enabled: false
    },
    yAxis: [{
        lineWidth: 0.1,
        tickWidth: 0.1,
        opposite: true,
        visible: true,
        type: 'linear',
        alignTicks: true,
        labels: {
            align:'right',
        },
    },
    {
        lineWidth: 0.1,
        tickWidth: 0.1,
        alignTicks: true,
        opposite: false,
        type: 'logarithmic',
        gridLineColor: 'transparent',
        visible: true
    }],
    xAxis: {
        lineWidth: 0.1,
        tickWidth: 0.1,
        tickLength: 5,
        min: Date.UTC(2010, 6, 1),
        ordinal: false
    },
    rangeSelector: {
        enabled: false
    },
    navigator: {
        height: 30,
        outlineWidth: 0.1,
        handles: {
            lineWidth: 0.1,
        },
        xAxis:  {
            gridLineWidth: 0.1,
            tickLength: 0,
        }
    },
    scrollbar: {
        enabled: false
            }
            }
    );
});

谢谢你!

rkue9o1l

rkue9o1l1#

在Highstock中,yAxis.labels.align默认为right,但yAxis也是相反的。这可能看起来不直观,但您只需要将yAxis.labels.align更改为'left'。

演示:https://jsfiddle.net/BlackLabel/pt2sb60x/
API引用:https://api.highcharts.com/highstock/yAxis.opposite

相关问题