如何在Highcharts Javascript庫中的散點圖上添加額外標簽？

Question

我正在使用Highcharts JavaScript庫來顯示一些浮點值，我通過php提供給js代碼。 正如您在下圖中所看到的，現在每個點的鼠標懸停都會顯示與軸值和文本“text：undefined”對應的兩個值。

我的問題是 ：有沒有辦法為散點圖的每個點顯示不同的文字？ 我有一個與每個點對應的文本，但我還沒有找到顯示它的方法。

我的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 ",";
                }
            }
            ?>
            ]}]
    });
});    

}）;

謝謝。

Answer 1

如果文本對於每個點都是唯一的，則可以傳遞超過x和y的值作為值。 在下面的示例中，我傳遞了三個其他值：locked，unlocked和potential。 然后要在工具提示格式化程序中訪問它們，請使用this.point.locked執行此this.point.locked

Answer 2

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

嘗試在此代碼行中設置文本，只是為了檢查我的建議是否會解決您的問題，請嘗試：

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

然后檢查（this.x）值是否顯示為“未定義”。