如何在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庫的散點圖點上添加額外的標籤？

回答

相關問題