未显示序列最后一点的Highcharts数据标签

Question

我想在折线图中的系列的最后一点显示数据标签，并添加此代码：

 dataLabels: {
    enabled: true,
    formatter: function() {
      if (this.x == this.series.data[this.series.data.length - 1].x) {
        return 'Test';
      } else {
        return null;
      }
    }
  },

不幸的是，数据标签没有散布。参见fiddle

Answer 1

您可以看这个=>

working example

Highcharts.chart('container', {
  chart: {
    height: 800,    
    style: {
      color: '#2e4964',
    },
    events: {
      load() {
        let chart = this;
        chart.series.forEach(s => {
          s.setState('inactive')
        })
      }
    }
  },


  title: {
    text: 'Corona',
    align: 'left',
    y: 20,
    margin: 0,
    style: {
      color: '#292929',
      fontWeight: '700',
      fontWeight: '600',
      fontSize: '22px',
      fontFamily: 'Fira Sans,sans-serif'
    }
  },

  subtitle: {
    text: 'Verlauf der Pandemie in den Ländern',
    align: 'left',
    useHTML: true,
    style: {
      fontFamily: 'Poppins',
      fontWeight: '400',
      color: '#373737',
      fontSize: "14px"
    }
  },


  xAxis: [{
    type: 'linear',
    min: 1,
    max: 40,
    tickInterval: 5,
    tickLength: 5,  
    labels: {
      style: {
        fontFamily: 'Poppins',
        fontWeight: '400',
        color: '#373737',
        fontSize: "14px"
      }
    },
    title: {
      text: ''
    }
  }],

  yAxis: [{
    type: 'logarithmic',
    max: 40000,
    // minorTickInterval: 1,
    min: 100,
    title: {
      text: null
    },
    labels: {
      style: {
        fontFamily: 'Poppins',
        fontWeight: '400',
        color: '#373737',
        fontSize: "14px"
      }
    }
  }],

  exporting: {
    buttons: {
      contextButton: {
        enabled: false
      }
    }
  },

  legend: {
    enabled: true,
    reversed: false,
    title: {
      text: 'Länder an- und abwählen:',
      style: {
        fontFamily: 'Poppins',
        fontWeight: '600',
        color: '#373737',
        fontSize: "14px"
      }
    },
    layout: 'horizontal',
    align: 'left',
    verticalAlign: 'top',
    width: 300,
    maxHeight: 200,
    x: -8,
    padding: 10,
    floating: false,
    borderWidth: 0,
    shadow: false,
    itemMarginTop: 1,
    itemStyle: {
      fontFamily: 'Poppins',
      fontWeight: '400',
      color: '#373737',
      fontSize: "14px"
    }
  },

  // tooltip: {
  //     shared: false,
  //     useHTML: true,
  //     headerFormat: '<span style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 200px;color: black;font-family:Poppins,sans-serif">Tag {point.x}</span><br>',
  //     pointFormat: '<span style="color:{point.color};">● </span><span style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 200px;color: black;font-family:Poppins,sans-serif;margin-top: 50px;">{series.name} : </span><span style="white-space:normal;font-size: 14px;font-weight: 800;min-width: 200px;color: black;font-family:Poppins,sans-serif">{point.y:,.0f}<br/></b></span>',
  //     },

  tooltip: {
    useHTML: true,
    enabled: true,
    outside: true,
    formatter: function() {
      return '<div style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 120px;color: #373737;font-family:Poppins">' + 'Tag ' + this.x + '<br>' + this.series.name + ': <b>' + Highcharts.numberFormat(this.point.y, 0) + '</b>';
    }
  },


  credits: {
    href: '',
    position: {
      align: 'right',
      y: -35,
    },
    text: 'Quellen: JHU CSSE, WHO CDC, NHC, Dingxiangyua',
    style: {
      cursor: 'arrow',
      fontFamily: 'Poppins',
      fontWeight: 'normal',
      fontSize: "12px"
    }
  },

  plotOptions: {
    series: {
      dataLabels: {
        align: 'right',
        enabled: true,
        allowOverlap: true,
        formatter: function() {
          if (this.x == this.series.data[this.series.data.length - 1].x) {
            return '<span style="color: #373737;font-weight: normal">' + Highcharts.dateFormat("%e. %B", this.x) + '</span>:<br>' + '<span style="color: #003f6e;font-weight: bold">' + Highcharts.numberFormat(this.y, 0) + '</span>';
          } else {
            return null;
          }
        },
        style: {
          textOutline: 0,
          fontFamily: 'Poppins',
          fontWeight: '400',
          color: '#000',
          fontSize: "12px"
        }
      },
      marker: {
        symbol: 'circle',
        enabled: false
      }
    }
  },

  data: {
    googleSpreadsheetKey: '13gjvlHhCZKlNcC1DV3nStGeWLBLWx3gxTO3SN9F3GQc',
    complete: function(options) {
      options.series[0].data.forEach(point => {
        if (point[1] === 0) {
          point[1] = null;
        }
      });
    }
  },

  series: [{
      color: '#8ebfd7',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: 'rgb(70, 151, 190)',
      opacity: 0.5,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#266f9a',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#1c2b54',
      opacity: 1,
          dataLabels: {
        enabled: true,
        formatter: function() {
          if (this.x == this.series.data[this.series.data.length - 1].x) {
            return 'Test';
          } else {
            return null;
          }
        }
      },
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#780081',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#9c00b3',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#b3007b',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#b30012',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#b36d00',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#b39c00',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#a3b300',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#59b300',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#12b36b',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#00b394',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#00a8b3',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#0091b3',
      opacity: 0.3,
      states: {
        hover: {
          opacity: 1
        }
      }
    },
    {
      color: '#373737',
      name: 'Verdopplung alle 3 Tage',
      clip: false,
      dashStyle: 'dot',
      showInLegend: false,
      states: {
        inactive: {
          opacity: 1
        }
      },
    }
  ]

});

Answer 2

您的序列包含63个点，但是只有23个点定义了y属性并显示。您需要过滤可见点并获取它们中的最后一个，例如：

  dataLabels: {
    enabled: true,
    formatter: function() {
      var visiblePoints = this.series.points.filter(p => typeof p.y === 'number');

      if (this.x == visiblePoints[visiblePoints.length - 1].x) {
        return 'Test';
      } else {
        return null;
      }
    }
  }
实时演示：

https://jsfiddle.net/BlackLabel/e50jspxu/