Highcharts 时间轴重命名系列标签

Question

我有这个 Highcharts 时间轴，我想将系列标签重命名为更具描述性（而不是显示 'Series 1'、'Series 2' 等），换句话说，一个有意义的标签名称。

我以为很简单，加上括号，然后调用名字属性，但是渲染失败。这很麻烦，因为这是我在 Highcharts 中唯一能找到的关于命名系列的文档。

代码如下：

<script>
(function(H) {

  H.seriesTypes.timeline.prototype.getXExtremes = function(xData) {
    var series = this;

    return {
      min: H.arrayMin(xData),
      max: H.arrayMax(xData)
    };
  }
}(Highcharts));

Highcharts.dateFormats = {
  q: function(timestamp) {
    var date = new Date(timestamp),
      quarter = (Math.floor(date.getUTCMonth() / 3) + 1);
    return quarter;
  }
};
Highcharts.chart('container', {
  chart: {
    zoomType: 'x',
    type: 'timeline'
  },
  //xAxis: {
  //type: 'datetime',
  //visible: true
  //},
  xAxis: {
    type: 'datetime',
    units: [ // responsive ticks
      ['month', [3, 6]],
      ['year', [1]]
    ],
    labels: {
      format: '{value:Q%q\'%y}',
      //rotation: -30
    }
  },
  yAxis: {
    gridLineWidth: 1,
    title: null,
    labels: {
      enabled: false
    }
  },
  legend: {
    enabled: true
  },
  title: {
    text: '<strong><font size="+10">INITIATIVE TIMELINE</font></strong>'
  },
  subtitle: {
    text: ''
  },
  tooltip: {
    style: {
      width: 300
    }
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    timeline: {
      lineWidth: 0,
      legendType: '',
      showInLegend: true,
      colorByPoint: false,
      dataLabels: {
        allowOverlap: true,
        format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
          '{point.x:%d %b %Y}</span><br/>{point.label}'
      },
      marker: {
        symbol: 'circle'
      },
    }
  },
  series: [{
    dataLabels: {
      distance: 40
    }, {name: 'TEST1',
    data: [{
      x: Date.UTC(1951, 5),
      name: 'First dogs in space',
      label: 'First dogs in space',
      description: "Dezik and Tsygan were the first dogs to make a sub-orbital flight on 22 July 1951. Both dogs were recovered unharmed after travelling to a maximum altitude of 110 km."
    }, {
      x: Date.UTC(1971, 11, 2),
      name: 'First soft Mars landing',
      label: 'First soft Mars landing',
      description: "Mars 3 was an unmanned space probe of the Soviet Mars program which spanned the years between 1960 and 1973. Mars 3 was launched May 28, 1971, nine days after its twin spacecraft Mars 2. The probes were identical robotic spacecraft launched by Proton-K rockets with a Blok D upper stage, each consisting of an orbiter and an attached lander."
    }, {
      x: Date.UTC(1976, 3, 17),
      name: 'Closest flyby of the Sun',
      label: 'Closest flyby of the Sun',
      description: "Helios-A and Helios-B (also known as Helios 1 and Helios 2) are a pair of probes launched into heliocentric orbit for the purpose of studying solar processes. A joint venture of West Germany's space agency DFVLR (70 percent share) and NASA (30 percent), the probes were launched from Cape Canaveral Air Force Station, Florida."
    }]}
  }, {
    dataLabels: {
      distance: 90
    }, {name: 'TEST2',
    data: [{
      x: Date.UTC(1959, 0),
      name: 'First artificial satellite to reach the Moon',
      label: 'First artificial satellite to reach the Moon',
      description: "Luna 1 was the first artificial satellite to reach the Moon vicinity and first artificial satellite in heliocentric orbit."
    }, {
      x: Date.UTC(1966, 1),
      name: 'First soft landing on the Moon',
      label: 'First soft landing on the Moon',
      description: "Yuri Gagarin was a Soviet pilot and cosmonaut. He became the first human to journey into outer space when his Vostok spacecraft completed one orbit of the Earth on 12 April 1961."
    }, {
      x: Date.UTC(1989, 7, 8),
      name: 'First astrometric satellite',
      label: 'First astrometric satellite',
      description: "Hipparcos was a scientific satellite of the European Space Agency (ESA), launched in 1989 and operated until 1993. It was the first space experiment devoted to precision astrometry, the accurate measurement of the positions of celestial objects on the sky."
    }]}
  }
});
</script>

感谢您的帮助。

Answer 1

在您的代码中，少了几个括号，但向系列添加名称的想法是正确的。
此属性存在于时间轴系列中。

  series: [{
    dataLabels: {
      distance: 40
    },
        name: 'TEST1',
    data: [{

API: https://api.highcharts.com/highcharts/series.timeline.name
现场演示： https://jsfiddle.net/BlackLabel/hxpqsndt/

Highcharts 时间轴重命名系列标签

Highcharts Timeline Renaming Series Labels

html

javascript

css

timeline

highcharts