Question

我找不到如何检索系列中数据的名称以在工具提示中显示它的方法，使用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>

能帮我吗？

Answer 1

对于系列名称，使用：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/

如何检索工具提示的名称数据

1 个答案: