如何在Highcharts Javascript库的散点图点上添加额外的标签？

我正在使用Highcharts JavaScript库来可视化一些浮点值，我通过php提供给js代码。如下图所示，每个点的鼠标悬停现在都会显示与轴值和文本“text：undefined”对应的两个值。 Current Visualisation 如何在Highcharts Javascript库的散点图点上添加额外的标签？

我的问题是：有没有显示散点图的每个点不同的文本的方法吗？我有一个对应于每个点的文本，但我没有找到显示它的方法。

我的JavaScript/PHP的代码是：

<script type="text/javascript"> 
    $(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'scatter', 
      zoomType: 'xy'}, 
     title: { 
      text: 'Average 24hrs Sentiment for <?php echo $channel?> by Gender ' 
     }, 
     subtitle: { 
      text: 'Source: ' 
     }, 
     xAxis: { 
      title: { 
       enabled: true, 
       text: 'Hours ([0-24h].[0-60mins])' 
      }, 
      startOnTick: true, 
      endOnTick: true, 
      showLastLabel: true 
     }, 
     yAxis: { 
      title: { 
       text: 'Sentiment (N. Bayes) %' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
        return ''+ 
        this.x +' hrs, '+ this.y +' sentiment, text: '; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'left', 
      verticalAlign: 'top', 
      x: 24, 
      y: 1, 
      floating: true, 
      backgroundColor: '#FFFFFF', 
      borderWidth: 1 
     }, 
     plotOptions: { 
      scatter: { 
       marker: { 
        radius: 5, 
        states: { 
         hover: { 
          enabled: true, 
          lineColor: 'rgb(100,100,100)' 
         } 
        } 
       }, 
       states: { 
        hover: { 
         marker: { 
          enabled: false 
         } 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Female', 
      color: 'rgba(223, 83, 83, .5)', 
      data: [ 
      <?php 

      for($j=0;$j<$i1;$j++) 
      { 
       if($females[$j]['Hour'][0] == "0") 
       { 
        echo '['.$females[$j]['Hour'][1].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]'; 
       } 
       else 
        echo '['.$females[$j]['Hour'].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]'; 

       if(($j+1)!=$i1) 
       { 
        echo ","; 
       } 
      } 
     ?> 
     ]}, 
      { 
      name: 'Male', 
      color: 'rgba(119, 152, 191, .5)', 
      data: [ 
      <?php 

      for($j=0;$j<$i2;$j++) 
      { 
       if($males[$j]['Hour'][0] == "0") 
       { 
        echo '['.$males[$j]['Hour'][1].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]'; 
       } 
       else 
        echo '['.$males[$j]['Hour'].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]'; 

       if(($j+1)!=$i2) 
       { 
        echo ","; 
       } 
      } 
      ?> 
      ]}] 
    }); 
});

}）;

谢谢。

来源

2012-08-09 Jamie Burstin

如果文本对每个点都是唯一的，则可以传递比x和y更多的值作为值。在以下example我传递了三个其他值：锁定，解锁和潜力。然后在工具提示格式化程序中访问它们，通过使用this.point.locked

来源

2012-08-09 15:59:09 Linger

来做到这一点你的例子真的很有帮助，我设法做到了我的可视化。谢谢。 – 2012-08-09 17:31:51

更改了简化样本： tooltip：{pointFormat：'locked：{point.locked}
unlocked：{point.unlocked}
potential：{point.potential}'} – 2013-06-17 20:40:15

this.x +' hrs, '+ this.y +' sentiment, text: ';

尝试设置文本在这行代码，只是为了检查我的建议是否会解决您的问题，尝试：

this.x +' hrs, '+ this.y +' sentiment, text: '+this.x;

然后检查是否（this.x）值出现insted“未定义”。

来源

2012-08-09 15:52:25 Itamar

如何在Highcharts Javascript库的散点图点上添加额外的标签？

回答

相关问题