HIghChart 点未按照设计堆叠

Question

我尝试在高图中创建没有线条的折线图。我正在寻找所需的结果，如下图所示。我有两个主要问题。

1. 点显示在彼此之上，根据设计它应该平行。我可以调整并将它们排成一行，但不能容纳超过 5-6 个点。因为数据是动态的，并且其他数据系列可以具有相同的值。
2. 其次，蓝色的季节线超出了盒子范围，并触及另一个季节的中期。如何解决这个问题。

我的代码在这里 https://jsfiddle.net/mossawir/chn8u3L5/65/

                Highcharts.chart('container', {
                  chart: {

                },
                title: {
                  text: ''
                },
                plotOptions: {
                            line: {
                                marker: {
                                symbol: 'circle',
                              // fillColor: 'blue',
                                radius: 5,
                                    enabled: true
                                },
                                states: {
                                    hover: {
                                        enabled: false
                                    }
                                }
                            }
                        },
                  xAxis: {
                  gridLineWidth: 1,
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    plotLines: [{
                    label: { 
                        text: 'Winter', // Content of the label. 
                      align: 'left', // Positioning of the label. Default to center.
                      x: +10, // Amount of pixels the labelrepositioned according to the alignment. 
                      y: +20 ,    
                      rotation: 0,
                  },
                  value: -0.5,
                  dashStyle: 'dash',
                  color: 'red',
                  zIndex: 9,
                },{
                label: { 
                      text: 'Spring', // Content of the label. 
                      align: 'left', // Positioning of the label. Default to center.
                      x: +10, // Amount of pixels the labelrepositioned according to the alignment. 
                      y: +20 ,    
                      rotation: 0,
                  },
                  value: 2.5,
                  dashStyle: 'dash',
                  color: 'red',
                  zIndex: 9,
                },{
                    label: { 
                      text: 'Summer', // Content of the label. 
                      align: 'left', // Positioning of the label. Default to center.
                      x: +10, // Amount of pixels the labelrepositioned according to the alignment. 
                      y: +20 ,    
                      rotation: 0,
                  },
                  value: 5.5,
                  dashStyle: 'dash',
                  color: 'red',
                  zIndex: 9,
                },{
                    label: { 
                      text: 'Autom', // Content of the label. 
                      align: 'left', // Positioning of the label. Default to center.
                      x: +10, // Amount of pixels the labelrepositioned according to the alignment. 
                      y: +20 ,    
                      rotation: 0,
                  },
                  value: 8.5,
                  dashStyle: 'dash',
                  color: 'red',
                  zIndex: 9,
                }],
                min: 0
              },

              yAxis: {

              },

              series: [{
                data: [29.9, null, 130.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
                lineWidth: 0,
                color: 'green',
              },
              {
                data: [29.9, 12, 137.4, 29.2, 144.0,null, 135.6, 135.6, null, 194.1, 95.6, 54.4], 
                lineWidth: 0,
                color: 'red',
              }, 
              {
                showInLegend: false,
                data: [{
                  x: -1,
                  y: 180,
                }, 180, 180, 180, 180],
                color: 'blue',
                dashStyle: 'solid',
                lineWidth: 1,
                pointPlacement: "on",
                marker: {
                  enabled: false,
                  
                },
                enableMouseTracking: false,
                states: {
                  inactive: {
                    enabled: false
                  }
                }
              }]

            });

设计截图：

Answer 1

如果我理解正确的话，您在 Highcharts 实施中面临两个问题。

点彼此重叠：Highcharts 按照数据数组中提供的顺序绘制点。如果您有多个具有相同 x 值的点（即，它们属于 x 轴上的同一类别），则它们将绘制在彼此的顶部。为了避免这种情况，您可以对同一类别中的点的 x 值引入一个小的偏移量。但是，如果您的点超过 5-6 个，这可能并不理想。

开箱即用的线条：线条开箱即用并触及另一个季节中间的问题是由于您为plotLines设置的值造成的。该值对应于绘制线条的 x 值。如果要在两个类别之间的边界处绘制线，则应将该值设置为第二个类别的索引减去0.5。例如，如果您想在“Jan”和“Feb”之间画一条线，则该值应为 1 - 0.5 = 0.5。

以下是修改情节的方法：

plotLines: [{
    label: { 
        text: 'Winter',
        align: 'left',
        x: +10,
        y: +20 ,    
        rotation: 0,
    },
    value: 2.5, // changed from -0.5
    dashStyle: 'dash',
    color: 'red',
    zIndex: 9,
},{
    label: { 
        text: 'Spring',
        align: 'left',
        x: +10,
        y: +20 ,    
        rotation: 0,
    },
    value: 5.5, // changed from 2.5
    dashStyle: 'dash',
    color: 'red',
    zIndex: 9,
},{
    label: { 
        text: 'Summer',
        align: 'left',
        x: +10,
        y: +20 ,    
        rotation: 0,
    },
    value: 8.5, // changed from 5.5
    dashStyle: 'dash',
    color: 'red',
    zIndex: 9,
},{
    label: { 
        text: 'Autom',
        align: 'left',
        x: +10,
        y: +20 ,    
        rotation: 0,
    },
    value: 11.5, // changed from 8.5
    dashStyle: 'dash',
    color: 'red',
    zIndex: 9,
}]