具有两个 Y 轴的高图上的奇怪行为

Question

我正在做一个包含 2 个系列的图表。系列之一是“分散”类型，另一个是“列”类型。 我遇到的问题是，当我只有散点系列时，x 轴上的日期时间标签从最左边开始，但是当我添加列系列时，就像所有标签都被推到中心，我不知道为什么.

这是我的小提琴考试：https://jsfiddle.net/cswpgq8u/7/

Highcharts.chart('container', {
chart: {
},
xAxis: {
            type: 'datetime',
            min: 1633057200000,
            max: 1634353200000,
            tickPositioner: function () {
                var ticklist = [];
                var extremes = this.getExtremes();
                var startDate = extremes.min;//this.min;
                var endDate = extremes.max; // this.max;
                var diff = moment.duration(endDate - startDate);
                if (diff.days() * 1 > 10)
                    increment = moment.duration(2, 'days').asMilliseconds();
                else
                    increment = Math.ceil((endDate - startDate) / 10);

                for (var timeline = startDate; moment(timeline) <= moment(endDate); timeline += increment) {
                    ticklist.push(timeline);
                }
                return ticklist;
            },
            maxPadding: 0,
            minPadding: 0,
            crosshair: {
                enabled: true,
                events: {
                }
            },
            plotLines: [{
                value: 1634266800000,
                color: 'green',
                width: 1,
                dashStyle: 'ShortDash',
                label: {
                    text:  "AHORA", // Content of the label. 
                    verticalAlign: 'bottom',
                    rotate: -90,
                    textAlign: 'right',
                    x: -2,
                    y: 30,
                    style: { color: '#6d6d6d', fontSize: '8px', fontWeight: 'bold', backgroundColor: 'white' }

                },
            }],
            plotBands: null,
            labels: {
                formatter: function () {
                    var xMin = this.axis.min;
                    var xMax = this.axis.max;
                    var labeltick = Highcharts.dateFormat('%d. %B', this.value);
                    if ((moment(xMax).diff(moment(xMin), 'days')) < 10) {
                        labeltick = Highcharts.dateFormat('%d. %B %H:%M:%S', this.value);
                    }
                    return labeltick;
                },
                x: -10 
            }
        },

yAxis:[
    {
            plotLines: [{
                id: 'ln-' + 'idEje1',
                color: '#9FA0A2',
                width: 0,
                value: 0,
                dashStyle: 'longdashdot'
            }],
            labels: {
                enabled:true,
                x: -5,
                y: -3,
            },
            title: {
                enabled: false,
            },
            lineColor: 'lightgray',
            lineWidth: 0,
            tickInterval: 1
        }, {
            title: {
                enabled: false,
            },
            lineColor: 'lightgray',
            opposite: true,
            labels: {
                enabled: false,
                x: -15,
                y: -3,
            },
            lineWidth: 0,
            tickInterval: 1
        }
],

plotOptions: {
},

series: [
                    {
                    yAxis: 0,
            type: 'scatter',
            minPointLength: 1,
            allowPointSelect: false,
            stack: true,
            data: [{
                x: 1634007600000,
              y: 2,
              value: 2,
              marker: {
                  symbol: 'circle',
                  radius: 3,
                  fillColor: 'red',
              },
              type: "ttf"
            },
            {
                x: 1633748400000,
              y: 5,
              value: 2,
              marker: {
                  symbol: 'circle',
                  radius: 3,
                  fillColor: 'red',
              },
              type: "ttf"
            },
            {
                x: 1633143600000,
              y: 2,
              value: 2,
              marker: {
                  symbol: 'circle',
                  radius: 3,
                  fillColor: 'red',
              },
              type: "ttf"
            },
            {
                x: 1633402800000,
              y: 2,
              value: 2,
              marker: {
                  symbol: 'circle',
                  radius: 3,
                  fillColor: 'red',
              },
              type: "ttf"
            }],
            name: 'On YAxis 0',
            tooltip: {
                pointFormatter: function () {
                    var point = this;
                    return "Valor TTF:" + ' <b>' + point.y + ' Días</b><br/>';
                },
            }
                    },
          {
            yAxis: 1,
            type: 'column',
            allowPointSelect: false,
            minPointLength: 1,
            data: [{
                      x: 1633708800000,
                      y: 5,
                      type: "duracion",
                      value: 5
                  },
                  {
                      x: 1633881600000,
                      y: 3,
                      type: "duracion",
                      value: 3
                  }],
            name: 'On YAxis1',
            tooltip: {
                pointFormatter: function () {
                    var point = this;
                    return "Duración:" + ' <b>' + point.y + ' minutos</b><br/>';
                },
            },
            pointWidth: 1
          }
]

});

有2个系列

一个系列

我认为这是因为 Column 系列。但是不知道怎么解决。

Answer 1

额外的空间是由列系列的默认计算pointRange引起的。你需要自己定义：

    series: [{
            type: 'scatter',
            ...
        },
        {
            type: 'column',
            pointRange: 1,
            ...
        }
    ]

---

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

API 参考： https://api.highcharts.com/highcharts/series.column.pointRange