1

我找不到如何检索系列中数据的名称以将其显示在工具提示中，使用 this.x 它可以工作，但不能使用 this.series.data.name

悬停在线上时，名称始终保持“未定义”

我查看了文档，但没有找到解决方案，这就是为什么我第一次在这里发消息，我是普通读者，第一次找不到..非常感谢大家

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Affectation des véhicules'
    },
    xAxis: {
        type: 'datetime',
		min: Date.UTC(2019, 7, 15),
		max: Date.UTC(2019, 7, 30)
		    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['VITO 5 places blanc','VITO 5 places bleu','VITO 9 places gris','VITO 5 places gris','20 M3','SPRINTER'],
        reversed: true
    },
  tooltip: {
    formatter () {
      const x1 = Highcharts.dateFormat('%d/%m/%Y', this.x)
      const x2 = Highcharts.dateFormat('%d/%m/%Y', this.x2)
      const chantier = this.series.data.name
      const header = `<span style="font-size:10px">du ${x1} au ${x2}</span><table>`
  
      const body = `<tr>
        <td style="color:${this.series.color};padding:0">Chantier: </td>
        <td style="padding:0"><b>${chantier}</b></td>
      </tr>`
      
      const footer = '</table>'
      
      return header + body + footer
    },
    useHTML: true
  },
    series: [{
    					
              data: [{
             		  name: 'aze',
                  x: Date.UTC(2019, 7, 20), 
                  x2: Date.UTC(2019, 7, 22),
                  y: 5
           		   },        
            		  {
                  name: 'azer',
                  x: Date.UTC(2019, 7, 24), 
                  x2: Date.UTC(2019, 7, 25),
                  y: 2
              }]
    			 }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

你能帮我吗 ？

4

1 回答 1

0

对于系列名称，请使用：this.series.name，但对于点名称，请使用this.point.name：：

tooltip: {
    formatter() {
        const x1 = Highcharts.dateFormat('%d/%m/%Y', this.x)
        const x2 = Highcharts.dateFormat('%d/%m/%Y', this.x2)
        const chantier = this.point.name
        const header = `<span style="font-size:10px">du ${x1} au ${x2}</span><table>`

        const body = `<tr>
    <td style="color:${this.series.color};padding:0">Chantier: </td>
    <td style="padding:0"><b>${chantier}</b></td>
  </tr>`

        const footer = '</table>'

        return header + body + footer
    },
    useHTML: true
}

现场演示：http: //jsfiddle.net/BlackLabel/u2ekp4wz/

于 2019-08-21T14:22:44.153 回答